Separate Checkbox values

Question

Separate Checkbox values

Asked 6 years, 8 months ago

Viewed 61 times

1

Good afternoon, I have a checkbox set that have 3 blue and 2 red selections. The priority selection is red, that is, if I take a red one even if I haven’t selected all the blue ones, the next one should be red. My problem is being to present this data separately.

<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>

It was not clear "provide such data separately." How would that be?

– Sam

2018/03/15 at 15:31
I need to store the values in a single variable, separated by '-' or ',' but I need the red numbers always to come first, followed by the blue numbers.

– Tadeu

2018/03/15 at 15:33
Sorry, I’m new using this platform and I couldn’t find where to edit, then I created a new question. I should delete this one?

– Tadeu

2018/03/15 at 15:49

1 answer

Browser other questions tagged javascript jquery

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

by Sam • **79,597** points · Answer 1 · 2018-03-15T16:12:16+00:00

You can create a for and first group the red ones and then the blue ones and put everything into a variable, which I called results. Behold:

var globalAzul = 0;
var globalVermelho = 0;
var results;
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;
    
    // INÍCIO DA VERIFICAÇÃO
    
    var els = document.body.querySelectorAll("label[id*='div_input']");
    
    var elVermelho = elAzul = '';
    for(var x=0; x<els.length; x++){
       
       var valInpt = document.body.querySelector("#"+els[x].id.replace("div_","")).value
       
       elVermelho += els[x].className == "vermelhoMarcado" ? " "+valInpt : "";
           elAzul += els[x].className == "azulMarcado" ? " "+valInpt : "";
    }
    
    results = (elVermelho+elAzul).trim();
    
    // JOGA OS VALORES NO INPUT
    resultado.value = results;
    
    console.log(results);
    
    // FIM DA VERIFICAÇÃO
}

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++;
    }
  }
}

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;
}

<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>

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