Good afternoon, I have a checkbox set that has 3 blue and 2 red selections. The priority selection is red, that is, if I take a red one even though I have not selected all the blues, the next one should be red. My problem is being to present these 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>varglobalAzul=0;varglobalVermelho=0;functionadd(_this){varobjeto=_this.id;varresultado=document.getElementById('resultado');varvalue=objeto.value;varhasAdd=resultado.value.search(value)>0;if(_this.checked&&!hasAdd){resultado.value+=''+_this.value;}elseif(!_this.checked&&hasAdd){varer=newRegExp(_this.value,'ig');resultado.value=resultado.value.replace(er,'');}resultado.value=resultado.value.replace(/{2,}/g,'');vartotalAzul=3;vartotalVermelho=2;varobjetoDivClasse=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>