How to make two separate selections

Asked

Viewed 58 times

0

Good afternoon, you guys, I am developing an application where the user will have a number amount, for example from 01 to 20 and he should perform two selections, 3 red numbers and 5 blue. The first selection will mark the red numbers and the second selection will mark the blue numbers. It can only start or continue selecting numbers in blue after all numbers in red are selected. So, assuming he selects the 3 numbers in red, and then selects 2 in blue and after he unchecks a red number, the next number he dials should turn red so he continues with the blue numbers.

When selecting the Random option, it automatically selects 3 red and 5 blue.

Follows code.

<html>
<head>
<style type="text/css">

input[type=checkbox] {
  display:none;
}

.default 
{
  color: black;
  border: 1px solid #000;
  padding-left: 10px;
  padding-right: 10px;
  padding-top: 5px;
  width: 15px;
  padding-bottom: 5px;
}

.azulMarcado
{
  color: white;
  background-color:#4682B4;
  font-weight: 500;
  width: 15px;
  border: 1px solid #000;
  padding-left: 10px;
  padding-right: 10px;
  padding-top: 5px;
  padding-bottom: 5px;
}

.vermelhoMarcado
{
    color: white;
    background-color:red;
    font-weight: 500;
    width: 15px;
    border: 1px solid #000;
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 5px;
    padding-bottom: 5px;
}
</style>

</head>
<body>
<input type="text" id="resultado">
<label id="div_input_1" class="default"><input type='checkbox' name='campo' onclick="add(this)" value="01" id="input_1"/>01</label>
<label id="div_input_2" class="default"><input type='checkbox' name='campo' onclick="add(this)" value="02" id="input_2"/>02</label>
<label id="div_input_3" class="default"><input type='checkbox' name='campo' onclick="add(this)" value="03" id="input_3"/>03</label>
<label id="div_input_4" class="default"><input type='checkbox' name='campo' onclick="add(this)" value="04" id="input_4"/>04</label>
<label id="div_input_5" class="default"><input type='checkbox' name='campo' onclick="add(this)" value="05" id="input_5"/>05</label>
<label id="div_input_6" class="default"><input type='checkbox' name='campo' onclick="add(this)" value="06" id="input_6"/>06</label>
<label id="div_input_7" class="default"><input type='checkbox' name='campo' onclick="add(this)" value="07" id="input_7"/>07</label>
<label id="div_input_8" class="default"><input type='checkbox' name='campo' onclick="add(this)" value="08" id="input_8"/>08</label>
<label id="div_input_9" class="default"><input type='checkbox' name='campo' onclick="add(this)" value="09" id="input_9"/>09</label>
<label id="div_input_10" class="default"><input type='checkbox' name='campo' onclick="add(this)" value="10" id="input_10"/>10</label>

<div>
  <br>
  <button type="button" name="random" id="random" onclick="random()">
   Aleatórios
  </button>
</div>

<!--<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>-->

<script>
var globalAzul = 0;
var globalVermelho = 0;

function add(_this)
{
    var objeto = _this.id;
    var resultado = document.getElementById('resultado');
    var value = objeto.value;
    var hasAdd = resultado.value.search(value) > 0; 

    if(_this.checked && !hasAdd)
    {
        resultado.value += ' '+_this.value;
    }
    else if(!_this.checked && hasAdd)
    {
        var er = new RegExp(_this.value, 'ig');
        resultado.value = resultado.value.replace(er, '');
    }     

    resultado.value = resultado.value.replace(/ {2,}/g, ' ');

    var totalAzul = 3;
    var totalVermelho = 2;
    var objetoDivClasse = document.getElementById("div_" + objeto).className;

    if (!document.getElementById(objeto).checked)
    {
        if (objetoDivClasse.indexOf("azul") != -1)
            globalAzul = globalAzul - 1;
        else if (objetoDivClasse.indexOf("vermelho") != -1)
            globalVermelho = globalVermelho - 1;

        document.getElementById("div_" + objeto).className = "default";
    }
    else
    {
        if (globalAzul >= totalAzul && globalVermelho >= totalVermelho)
        {
            document.getElementById(objeto).checked = false;
            return;
        }
        else
        {
            if (globalVermelho < totalVermelho)
            {
                document.getElementById("div_" + objeto).className = "vermelhoMarcado";
                globalVermelho = globalVermelho + 1;
            }            
            else if (globalAzul < totalAzul)
            {
                document.getElementById("div_" + objeto).className = "azulMarcado";
                globalAzul = globalAzul + 1;
            }
        }
    }

    document.getElementById("labelTotalAzul").innerHTML = globalAzul;
    document.getElementById("labelTotalVermelho").innerHTML = globalVermelho;
}

function random(){

  //Armazeno as suas opções
  var nodeList = document.getElementsByName('campo');

  //limpo o resultado
  //document.getElementById('resultado').value = '';

  //Percorro suas opções 
  for(i=0;i<nodeList.length;i++){

    //Desmarco todos
    nodeList[i].checked = false;
  }

  var i = 0;
  while(i<5){
    //Pego um indice aleatorio do array
     var indiceAleatoria = Math.floor(Math.random() * nodeList.length)

    var option = nodeList[indiceAleatoria];

    //Se a opção ainda não foi sorteada adiciono ela.
    if(option.checked == false){

      //Marco a opção sorteada
      option.checked = true;

       //Adiciono a opção sorteada
       alert(option);
       add(option);

      i++;
    }
  }


}
</script>


<br>
Total Azul:<label id="labelTotalAzul">0</label><br>
Total Vermelho:<label id="labelTotalVermelho">0</label>

</body>
</html>
javascript jquery css

1 answer

0

I haven’t had much time to think of a good logic, but if it’s more or less that, you can get better as needed:

<html>
<head>
<style type="text/css">

.azulMarcado
{
  color: white;
  background-color:#4682B4;
  font-weight: 500;
  width: 50px;
  border: 1px solid #000;
}

.vermelhoMarcado
{
    color: white;
    background-color:red;
    font-weight: 500;
    width: 50px;
    border: 1px solid #000;
}
</style>

</head>
<body>

<div id="div_input_1"><input type='checkbox' name='campo' onclick="add(this.id)" value="01" id="input_1"/>01</div>
<div id="div_input_2"><input type='checkbox' name='campo' onclick="add(this.id)" value="02" id="input_2"/>02</div>
<div id="div_input_3"><input type='checkbox' name='campo' onclick="add(this.id)" value="03" id="input_3"/>03</div>
<div id="div_input_4"><input type='checkbox' name='campo' onclick="add(this.id)" value="04" id="input_4"/>04</div>
<div id="div_input_5"><input type='checkbox' name='campo' onclick="add(this.id)" value="05" id="input_5"/>05</div>
<div id="div_input_6"><input type='checkbox' name='campo' onclick="add(this.id)" value="06" id="input_6"/>06</div>
<div id="div_input_7"><input type='checkbox' name='campo' onclick="add(this.id)" value="07" id="input_7"/>07</div>
<div id="div_input_8"><input type='checkbox' name='campo' onclick="add(this.id)" value="08" id="input_8"/>08</div>
<div id="div_input_9"><input type='checkbox' name='campo' onclick="add(this.id)" value="09" id="input_9"/>09</div>
<div id="div_input_10"><input type='checkbox' name='campo' onclick="add(this.id)" value="10" id="input_10"/>10</div>


<script>
var globalAzul = 0;
var globalVermelho = 0;

function add(objeto)
{
    var totalAzul = 5;
    var totalVermelho = 3;
    var objetoDivClasse = document.getElementById("div_" + objeto).className;

    if (!document.getElementById(objeto).checked)
    {
        if (objetoDivClasse.indexOf("azul") != -1)
            globalAzul = globalAzul - 1;
        else if (objetoDivClasse.indexOf("vermelho") != -1)
            globalVermelho = globalVermelho - 1;

        document.getElementById("div_" + objeto).className = "";
    }
    else
    {
        if (globalAzul >= totalAzul && globalVermelho >= totalVermelho)
        {
            document.getElementById(objeto).checked = false;
            return;
        }
        else
        {
            if (globalAzul < totalAzul)
            {
                document.getElementById("div_" + objeto).className = "azulMarcado";
                globalAzul = globalAzul + 1;
            }
            else if (globalVermelho < totalVermelho)
            {
                document.getElementById("div_" + objeto).className = "vermelhoMarcado";
                globalVermelho = globalVermelho + 1;
            }
        }
    }

    document.getElementById("labelTotalAzul").innerHTML = globalAzul;
    document.getElementById("labelTotalVermelho").innerHTML = globalVermelho;
}
</script>


<br>
Total Azul:<label id="labelTotalAzul">0</label><br>
Total Vermelho:<label id="labelTotalVermelho">0</label>

</body>
</html>

  • Andreia, helped me a lot already. I only have one more question. How I get the checkbox separated by color?

  • @Tadeu I did not understand your doubt

  • I need to present the selected numbers, however, divided by colors.

  • Suppose you select two red numbers and then two blue numbers, then you take out a red number and add again, and then add another blue. The variable that stores the checkbox values mixes everything. I need you to always store the red numbers first, followed by the blue numbers.

  • I updated the post code so you can see how it looked. Just this question of storing the values separated by color.

  • you speak in the textbox? because the label is separating

  • Yes, in the textbox that is being presented the result. If you select right in order, it is right, however, if you uncheck a red at the end for example and reschedule, then the order is already messy.

  • then takes the text of the removed item and replace it by ""

Show 3 more comments

Browser other questions tagged javascript jquery css

You are not signed in. Login or sign up in order to post.