Good afternoon guys, I am developing an application where the user will have a number of numbers, for example from 01 to 20 and he should make two selections, 3 red numbers and 5 blue ones. The first selection will mark the red numbers and the second selection will mark the blue numbers. It can only start or continue the selection of numbers in blue after all the numbers in red are selected. Then, assuming he selects the 3 numbers in red, and then select 2 in blue and after he unchecks a red number, the next number he scores should be in red so he continues with the blue numbers.
When you select the Random option, it automatically selects 3 reds and 5 blues.
Follow the 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>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>