PS: Corrigi a sua função maisque10(). Adicionei o e.preventDefault(), no seu codigo o usuário poderia continuar checkando os checkboxes mesmo depois de ultrapassar o limite de 10
PS: Corrigi a sua função maisque10(). Adicionei o e.preventDefault(), no seu codigo o usuário poderia continuar checkando os checkboxes mesmo depois de ultrapassar o limite de 10
<!--
Observe que no elemento ul#resultado eu removi todo os li.resultado*
Eu estou desenhando dinamicamente no javascript na linha:
$exiberesultado.append('<li class="item-resultado">'+this.value+', </li>');
-->
<!DOCTYPE html>
<html>
<head>
<title>Estudo</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<script src="http://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>
<!-- Latest compiled and minified CSS -->
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="style.css">
<body>
<div class="content">
<h3 class="text-center">Estudo</h3>
<div id="number">
<form name="form">
<div class="bgcb cbbuttons">01<input type="checkbox" value="01"></div>
<div class="bgcb cbbuttons">02<input type="checkbox" value="02"></div>
<div class="bgcb cbbuttons">03<input type="checkbox" value="03"></div>
<div class="bgcb cbbuttons">04<input type="checkbox" value="04"></div>
<div class="bgcb cbbuttons">05<input type="checkbox" value="05"></div><br>
<div class="bgcb cbbuttons">06<input type="checkbox" value="06"></div>
<div class="bgcb cbbuttons">07<input type="checkbox" value="07"></div>
<div class="bgcb cbbuttons">08<input type="checkbox" value="08"></div>
<div class="bgcb cbbuttons">09<input type="checkbox" value="09"></div>
<div class="bgcb cbbuttons">10<input type="checkbox" value="10"></div><br>
<div class="bgcb cbbuttons">11<input type="checkbox" value="11"></div>
<div class="bgcb cbbuttons">12<input type="checkbox" value="12"></div>
<div class="bgcb cbbuttons">13<input type="checkbox" value="13"></div>
<div class="bgcb cbbuttons">14<input type="checkbox" value="14"></div>
<div class="bgcb cbbuttons">15<input type="checkbox" value="15"></div><br>
<div class="bgcb cbbuttons">16<input type="checkbox" value="16"></div>
<div class="bgcb cbbuttons">17<input type="checkbox" value="17"></div>
<div class="bgcb cbbuttons">18<input type="checkbox" value="18"></div>
<div class="bgcb cbbuttons">19<input type="checkbox" value="19"></div>
<div class="bgcb cbbuttons">20<input type="checkbox" value="20"></div><br>
<div class="bgcb cbbuttons">21<input type="checkbox" value="21"></div>
<div class="bgcb cbbuttons">22<input type="checkbox" value="22"></div>
<div class="bgcb cbbuttons">23<input type="checkbox" value="23"></div>
<div class="bgcb cbbuttons">24<input type="checkbox" value="24"></div>
<div class="bgcb cbbuttons">25<input type="checkbox" value="25"></div><br>
</form>
</div>
<ul id="resultado">
</ul>
<div class="clear"></div>
<div class="botoes">
<button type="button" onclick="verificar();" id="btncheckar" class="btn btn-success">Veriricar</button>
<button type="button" onclick="limpar();" id="btnLimpar" class="btn btn-default">Limpar</button>
<button type="button" onclick="print();" class="btn btn-default" id="btnImprimir">Imprimir</button>
</div>
</div>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script language="JavaScript" type="text/javascript" src="campos.js"></script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>Estudo</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<script src="http://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>
<!-- Latest compiled and minified CSS -->
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="style.css">
<body>
<div class="content">
<h3 class="text-center">Estudo</h3>
<div id="number">
<form name="form">
<div class="bgcb cbbuttons">01<input type="checkbox" value="01"></div>
<div class="bgcb cbbuttons">02<input type="checkbox" value="02"></div>
<div class="bgcb cbbuttons">03<input type="checkbox" value="03"></div>
<div class="bgcb cbbuttons">04<input type="checkbox" value="04"></div>
<div class="bgcb cbbuttons">05<input type="checkbox" value="05"></div><br>
<div class="bgcb cbbuttons">06<input type="checkbox" value="06"></div>
<div class="bgcb cbbuttons">07<input type="checkbox" value="07"></div>
<div class="bgcb cbbuttons">08<input type="checkbox" value="08"></div>
<div class="bgcb cbbuttons">09<input type="checkbox" value="09"></div>
<div class="bgcb cbbuttons">10<input type="checkbox" value="10"></div><br>
<div class="bgcb cbbuttons">11<input type="checkbox" value="11"></div>
<div class="bgcb cbbuttons">12<input type="checkbox" value="12"></div>
<div class="bgcb cbbuttons">13<input type="checkbox" value="13"></div>
<div class="bgcb cbbuttons">14<input type="checkbox" value="14"></div>
<div class="bgcb cbbuttons">15<input type="checkbox" value="15"></div><br>
<div class="bgcb cbbuttons">16<input type="checkbox" value="16"></div>
<div class="bgcb cbbuttons">17<input type="checkbox" value="17"></div>
<div class="bgcb cbbuttons">18<input type="checkbox" value="18"></div>
<div class="bgcb cbbuttons">19<input type="checkbox" value="19"></div>
<div class="bgcb cbbuttons">20<input type="checkbox" value="20"></div><br>
<div class="bgcb cbbuttons">21<input type="checkbox" value="21"></div>
<div class="bgcb cbbuttons">22<input type="checkbox" value="22"></div>
<div class="bgcb cbbuttons">23<input type="checkbox" value="23"></div>
<div class="bgcb cbbuttons">24<input type="checkbox" value="24"></div>
<div class="bgcb cbbuttons">25<input type="checkbox" value="25"></div><br>
</form>
</div>
<ul id="resultado">
</ul>
<div class="clear"></div>
<div class="botoes">
<button type="button" onclick="verificar();" id="btncheckar" class="btn btn-success">Veriricar</button>
<button type="button" onclick="limpar();" id="btnLimpar" class="btn btn-default">Limpar</button>
<button type="button" onclick="print();" class="btn btn-default" id="btnImprimir">Imprimir</button>
</div>
</div>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script language="JavaScript" type="text/javascript" src="campos.js"></script>
</body>
</html>
<!--
Observe que no elemento ul#resultado eu removi todo os li.resultado*
Eu estou desenhando dinamicamente no javascript na linha:
$exiberesultado.append('<li class="item-resultado">'+this.value+', </li>');
-->
<!DOCTYPE html>
<html>
<head>
<title>Estudo</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<script src="http://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>
<!-- Latest compiled and minified CSS -->
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="style.css">
<body>
<div class="content">
<h3 class="text-center">Estudo</h3>
<div id="number">
<form name="form">
<div class="bgcb cbbuttons">01<input type="checkbox" value="01"></div>
<div class="bgcb cbbuttons">02<input type="checkbox" value="02"></div>
<div class="bgcb cbbuttons">03<input type="checkbox" value="03"></div>
<div class="bgcb cbbuttons">04<input type="checkbox" value="04"></div>
<div class="bgcb cbbuttons">05<input type="checkbox" value="05"></div><br>
<div class="bgcb cbbuttons">06<input type="checkbox" value="06"></div>
<div class="bgcb cbbuttons">07<input type="checkbox" value="07"></div>
<div class="bgcb cbbuttons">08<input type="checkbox" value="08"></div>
<div class="bgcb cbbuttons">09<input type="checkbox" value="09"></div>
<div class="bgcb cbbuttons">10<input type="checkbox" value="10"></div><br>
<div class="bgcb cbbuttons">11<input type="checkbox" value="11"></div>
<div class="bgcb cbbuttons">12<input type="checkbox" value="12"></div>
<div class="bgcb cbbuttons">13<input type="checkbox" value="13"></div>
<div class="bgcb cbbuttons">14<input type="checkbox" value="14"></div>
<div class="bgcb cbbuttons">15<input type="checkbox" value="15"></div><br>
<div class="bgcb cbbuttons">16<input type="checkbox" value="16"></div>
<div class="bgcb cbbuttons">17<input type="checkbox" value="17"></div>
<div class="bgcb cbbuttons">18<input type="checkbox" value="18"></div>
<div class="bgcb cbbuttons">19<input type="checkbox" value="19"></div>
<div class="bgcb cbbuttons">20<input type="checkbox" value="20"></div><br>
<div class="bgcb cbbuttons">21<input type="checkbox" value="21"></div>
<div class="bgcb cbbuttons">22<input type="checkbox" value="22"></div>
<div class="bgcb cbbuttons">23<input type="checkbox" value="23"></div>
<div class="bgcb cbbuttons">24<input type="checkbox" value="24"></div>
<div class="bgcb cbbuttons">25<input type="checkbox" value="25"></div><br>
</form>
</div>
<ul id="resultado">
</ul>
<div class="clear"></div>
<div class="botoes">
<button type="button" onclick="verificar();" id="btncheckar" class="btn btn-success">Veriricar</button>
<button type="button" onclick="limpar();" id="btnLimpar" class="btn btn-default">Limpar</button>
<button type="button" onclick="print();" class="btn btn-default" id="btnImprimir">Imprimir</button>
</div>
</div>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script language="JavaScript" type="text/javascript" src="campos.js"></script>
</body>
</html>
JS:JS:
var $checkboxList = $('input[type="checkbox"]'),
$resultadoList = $('.item-resultado'),
$bgcb = $('.bgradio'),
$exiberesultado = $('#resultado'),
$btnImprimir = $("#btnImprimir");
function verificar() {
// Verifica se não existe input selecionados
if ($("form input:checkbox:checked").length == 0) {
alert("Selecione algum número");
document.getElementsByClassName("item-resultado").style.display = "none";
}
for$exiberesultado.html(var i ='');
1; i <= $checkboxList.length; i++each(function(i){
//semostra nãoapenas estiveros checadonão selecionados
if ($checkboxList[i-1]this.checked) == false){
$resultadoList[i-1]$exiberesultado.innerText = append('<li iclass="item-resultado">'+this.value+', < 10? "0" + i : i/li>');
}
});
$btnImprimir.css("display", "initial");
};
function maisque10 () {
// controla se tem mÃnimo 10 escolhidos
$('form').on("click", 'input[type="checkbox"]', function (e) {
if ($("form input:checkbox:checked").length >= 10) {
alert("Voce selecionou 10 numeros");
e.preventDefault();
}
});
}
maisque10();
function limpar() {
// if ($checkboxList.prop('checked', true)) {
// $checkboxList.prop('checked', false);
// $bgcb.removeClass('bgradiochange');
// }
location.reload();
}
HTML:HTML:
<!DOCTYPE html>
<html>
<head>
<title>Estudo</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<script src="http://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>
<!-- Latest compiled and minified CSS -->
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="style.css">
<body>
<div class="content">
<h3 class="text-center">Estudo</h3>
<div id="number">
<form name="form">
<div class="bgcb cbbuttons">01<input type="checkbox" value="01"></div>
<div class="bgcb cbbuttons">02<input type="checkbox" value="02"></div>
<div class="bgcb cbbuttons">03<input type="checkbox" value="03"></div>
<div class="bgcb cbbuttons">04<input type="checkbox" value="04"></div>
<div class="bgcb cbbuttons">05<input type="checkbox" value="05"></div><br>
<div class="bgcb cbbuttons">06<input type="checkbox" value="06"></div>
<div class="bgcb cbbuttons">07<input type="checkbox" value="07"></div>
<div class="bgcb cbbuttons">08<input type="checkbox" value="08"></div>
<div class="bgcb cbbuttons">09<input type="checkbox" value="09"></div>
<div class="bgcb cbbuttons">10<input type="checkbox" value="10"></div><br>
<div class="bgcb cbbuttons">11<input type="checkbox" value="11"></div>
<div class="bgcb cbbuttons">12<input type="checkbox" value="12"></div>
<div class="bgcb cbbuttons">13<input type="checkbox" value="13"></div>
<div class="bgcb cbbuttons">14<input type="checkbox" value="14"></div>
<div class="bgcb cbbuttons">15<input type="checkbox" value="15"></div><br>
<div class="bgcb cbbuttons">16<input type="checkbox" value="16"></div>
<div class="bgcb cbbuttons">17<input type="checkbox" value="17"></div>
<div class="bgcb cbbuttons">18<input type="checkbox" value="18"></div>
<div class="bgcb cbbuttons">19<input type="checkbox" value="19"></div>
<div class="bgcb cbbuttons">20<input type="checkbox" value="20"></div><br>
<div class="bgcb cbbuttons">21<input type="checkbox" value="21"></div>
<div class="bgcb cbbuttons">22<input type="checkbox" value="22"></div>
<div class="bgcb cbbuttons">23<input type="checkbox" value="23"></div>
<div class="bgcb cbbuttons">24<input type="checkbox" value="24"></div>
<div class="bgcb cbbuttons">25<input type="checkbox" value="25"></div><br>
</form>
</div>
<ul id="resultado">
<li class="item-resultado"></li>
<li class="item-resultado"></li>
<li class="item-resultado"></li>
<li class="item-resultado"></li>
<li class="item-resultado"></li>
<li class="item-resultado"></li>
<li class="item-resultado"></li>
<li class="item-resultado"></li>
<li class="item-resultado"></li>
<li class="item-resultado"></li>
<li class="item-resultado"></li>
<li class="item-resultado"></li>
<li class="item-resultado"></li>
<li class="item-resultado"></li>
<li class="item-resultado"></li>
<li class="item-resultado"></li>
<li class="item-resultado"></li>
<li class="item-resultado"></li>
<li class="item-resultado"></li>
<li class="item-resultado"></li>
<li class="item-resultado"></li>
<li class="item-resultado"></li>
<li class="item-resultado"></li>
<li class="item-resultado"></li>
<li class="item-resultado"></li>
</ul>
<div class="clear"></div>
<div class="botoes">
<button type="button" onclick="verificar();" id="btncheckar" class="btn btn-success">Veriricar</button>
<button type="button" onclick="limpar();" id="btnLimpar" class="btn btn-default">Limpar</button>
<button type="button" onclick="print();" class="btn btn-default" id="btnImprimir">Imprimir</button>
</div>
</div>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script language="JavaScript" type="text/javascript" src="campos.js"></script>
</body>
</html>
CSS:CSS:
* {
margin: 0;
padding: 0;
}
@media print {
.number { visibility:hidden; }
form { visibility:hidden; }
.botoes { visibility:hidden; }
h3 { visibility:hidden; }
#resultado {
visibility: visible;
position: absolute;
top:0;
left:0;
}
}
.content {
width: 1200px;
height: auto;
margin: 0 auto;
}
#number {
width: 600px;
height: auto;
margin: 0 auto;
margin-top: 50px;
font-size: 28pt;
font-family: verdana;
text-align: center;
}
.bgcb {
width: 80px;
height: 50px;
background-color: white;
display: inline-block;
font-size: 20pt;
border: 1px solid #d8d8d8;
border-radius: 15px;
}
.bgcbchange {
background-color: black;
}
#resultado {
width: 1200px;
font-size: 20pt;
font-family: verdana;
height: 50px;
margin: 20px;
text-align: center;
visibility: visible;
}
.item-resultado {
display: inline;
margin-left: 5px;
}
.botoes {
width: auto;
height: auto;
margin: 0px auto;
text-align: center;
}
#btnImprimir {
display: none;
text-align: center;
}
input[type=checkbox] {
padding: 10px;
}
.clear {
clear: both;
}
JS:
var $checkboxList = $('input[type="checkbox"]'),
$resultadoList = $('.item-resultado'),
$bgcb = $('.bgradio'),
$exiberesultado = $('#resultado'),
$btnImprimir = $("#btnImprimir");
function verificar() {
// Verifica se não existe input selecionados
if ($("form input:checkbox:checked").length == 0) {
alert("Selecione algum número");
document.getElementsByClassName("item-resultado").style.display = "none";
}
for(var i = 1; i <= $checkboxList.length; i++){
//se não estiver checado
if ($checkboxList[i-1].checked) {
$resultadoList[i-1].innerText = ( i < 10? "0" + i : i);
}
}
$btnImprimir.css("display", "initial");
};
function maisque10 () {
// controla se tem mÃnimo 10 escolhidos
$('form').on("click", 'input[type="checkbox"]', function (e) {
if ($("form input:checkbox:checked").length >= 10) {
alert("Voce selecionou 10 numeros");
e.preventDefault();
}
});
}
maisque10();
function limpar() {
// if ($checkboxList.prop('checked', true)) {
// $checkboxList.prop('checked', false);
// $bgcb.removeClass('bgradiochange');
// }
location.reload();
}
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Estudo</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<script src="http://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>
<!-- Latest compiled and minified CSS -->
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="style.css">
<body>
<div class="content">
<h3 class="text-center">Estudo</h3>
<div id="number">
<form name="form">
<div class="bgcb cbbuttons">01<input type="checkbox" value="01"></div>
<div class="bgcb cbbuttons">02<input type="checkbox" value="02"></div>
<div class="bgcb cbbuttons">03<input type="checkbox" value="03"></div>
<div class="bgcb cbbuttons">04<input type="checkbox" value="04"></div>
<div class="bgcb cbbuttons">05<input type="checkbox" value="05"></div><br>
<div class="bgcb cbbuttons">06<input type="checkbox" value="06"></div>
<div class="bgcb cbbuttons">07<input type="checkbox" value="07"></div>
<div class="bgcb cbbuttons">08<input type="checkbox" value="08"></div>
<div class="bgcb cbbuttons">09<input type="checkbox" value="09"></div>
<div class="bgcb cbbuttons">10<input type="checkbox" value="10"></div><br>
<div class="bgcb cbbuttons">11<input type="checkbox" value="11"></div>
<div class="bgcb cbbuttons">12<input type="checkbox" value="12"></div>
<div class="bgcb cbbuttons">13<input type="checkbox" value="13"></div>
<div class="bgcb cbbuttons">14<input type="checkbox" value="14"></div>
<div class="bgcb cbbuttons">15<input type="checkbox" value="15"></div><br>
<div class="bgcb cbbuttons">16<input type="checkbox" value="16"></div>
<div class="bgcb cbbuttons">17<input type="checkbox" value="17"></div>
<div class="bgcb cbbuttons">18<input type="checkbox" value="18"></div>
<div class="bgcb cbbuttons">19<input type="checkbox" value="19"></div>
<div class="bgcb cbbuttons">20<input type="checkbox" value="20"></div><br>
<div class="bgcb cbbuttons">21<input type="checkbox" value="21"></div>
<div class="bgcb cbbuttons">22<input type="checkbox" value="22"></div>
<div class="bgcb cbbuttons">23<input type="checkbox" value="23"></div>
<div class="bgcb cbbuttons">24<input type="checkbox" value="24"></div>
<div class="bgcb cbbuttons">25<input type="checkbox" value="25"></div><br>
</form>
</div>
<ul id="resultado">
<li class="item-resultado"></li>
<li class="item-resultado"></li>
<li class="item-resultado"></li>
<li class="item-resultado"></li>
<li class="item-resultado"></li>
<li class="item-resultado"></li>
<li class="item-resultado"></li>
<li class="item-resultado"></li>
<li class="item-resultado"></li>
<li class="item-resultado"></li>
<li class="item-resultado"></li>
<li class="item-resultado"></li>
<li class="item-resultado"></li>
<li class="item-resultado"></li>
<li class="item-resultado"></li>
<li class="item-resultado"></li>
<li class="item-resultado"></li>
<li class="item-resultado"></li>
<li class="item-resultado"></li>
<li class="item-resultado"></li>
<li class="item-resultado"></li>
<li class="item-resultado"></li>
<li class="item-resultado"></li>
<li class="item-resultado"></li>
<li class="item-resultado"></li>
</ul>
<div class="clear"></div>
<div class="botoes">
<button type="button" onclick="verificar();" id="btncheckar" class="btn btn-success">Veriricar</button>
<button type="button" onclick="limpar();" id="btnLimpar" class="btn btn-default">Limpar</button>
<button type="button" onclick="print();" class="btn btn-default" id="btnImprimir">Imprimir</button>
</div>
</div>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script language="JavaScript" type="text/javascript" src="campos.js"></script>
</body>
</html>
CSS:
* {
margin: 0;
padding: 0;
}
@media print {
.number { visibility:hidden; }
form { visibility:hidden; }
.botoes { visibility:hidden; }
h3 { visibility:hidden; }
#resultado {
visibility: visible;
position: absolute;
top:0;
left:0;
}
}
.content {
width: 1200px;
height: auto;
margin: 0 auto;
}
#number {
width: 600px;
height: auto;
margin: 0 auto;
margin-top: 50px;
font-size: 28pt;
font-family: verdana;
text-align: center;
}
.bgcb {
width: 80px;
height: 50px;
background-color: white;
display: inline-block;
font-size: 20pt;
border: 1px solid #d8d8d8;
border-radius: 15px;
}
.bgcbchange {
background-color: black;
}
#resultado {
width: 1200px;
font-size: 20pt;
font-family: verdana;
height: 50px;
margin: 20px;
text-align: center;
visibility: visible;
}
.item-resultado {
display: inline;
}
.botoes {
width: auto;
height: auto;
margin: 0px auto;
text-align: center;
}
#btnImprimir {
display: none;
text-align: center;
}
input[type=checkbox] {
padding: 10px;
}
.clear {
clear: both;
}
JS:
var $checkboxList = $('input[type="checkbox"]'),
$resultadoList = $('.item-resultado'),
$bgcb = $('.bgradio'),
$exiberesultado = $('#resultado'),
$btnImprimir = $("#btnImprimir");
function verificar() {
// Verifica se não existe input selecionados
if ($("form input:checkbox:checked").length == 0) {
alert("Selecione algum número");
document.getElementsByClassName("item-resultado").style.display = "none";
}
$exiberesultado.html('');
$checkboxList.each(function(i){
//mostra apenas os não selecionados
if(this.checked == false){
$exiberesultado.append('<li class="item-resultado">'+this.value+', </li>');
}
});
$btnImprimir.css("display", "initial");
};
function maisque10 () {
// controla se tem mÃnimo 10 escolhidos
$('form').on("click", 'input[type="checkbox"]', function (e) {
if ($("form input:checkbox:checked").length >= 10) {
alert("Voce selecionou 10 numeros");
e.preventDefault();
}
});
}
maisque10();
function limpar() {
location.reload();
}
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Estudo</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<script src="http://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>
<!-- Latest compiled and minified CSS -->
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="style.css">
<body>
<div class="content">
<h3 class="text-center">Estudo</h3>
<div id="number">
<form name="form">
<div class="bgcb cbbuttons">01<input type="checkbox" value="01"></div>
<div class="bgcb cbbuttons">02<input type="checkbox" value="02"></div>
<div class="bgcb cbbuttons">03<input type="checkbox" value="03"></div>
<div class="bgcb cbbuttons">04<input type="checkbox" value="04"></div>
<div class="bgcb cbbuttons">05<input type="checkbox" value="05"></div><br>
<div class="bgcb cbbuttons">06<input type="checkbox" value="06"></div>
<div class="bgcb cbbuttons">07<input type="checkbox" value="07"></div>
<div class="bgcb cbbuttons">08<input type="checkbox" value="08"></div>
<div class="bgcb cbbuttons">09<input type="checkbox" value="09"></div>
<div class="bgcb cbbuttons">10<input type="checkbox" value="10"></div><br>
<div class="bgcb cbbuttons">11<input type="checkbox" value="11"></div>
<div class="bgcb cbbuttons">12<input type="checkbox" value="12"></div>
<div class="bgcb cbbuttons">13<input type="checkbox" value="13"></div>
<div class="bgcb cbbuttons">14<input type="checkbox" value="14"></div>
<div class="bgcb cbbuttons">15<input type="checkbox" value="15"></div><br>
<div class="bgcb cbbuttons">16<input type="checkbox" value="16"></div>
<div class="bgcb cbbuttons">17<input type="checkbox" value="17"></div>
<div class="bgcb cbbuttons">18<input type="checkbox" value="18"></div>
<div class="bgcb cbbuttons">19<input type="checkbox" value="19"></div>
<div class="bgcb cbbuttons">20<input type="checkbox" value="20"></div><br>
<div class="bgcb cbbuttons">21<input type="checkbox" value="21"></div>
<div class="bgcb cbbuttons">22<input type="checkbox" value="22"></div>
<div class="bgcb cbbuttons">23<input type="checkbox" value="23"></div>
<div class="bgcb cbbuttons">24<input type="checkbox" value="24"></div>
<div class="bgcb cbbuttons">25<input type="checkbox" value="25"></div><br>
</form>
</div>
<ul id="resultado">
</ul>
<div class="clear"></div>
<div class="botoes">
<button type="button" onclick="verificar();" id="btncheckar" class="btn btn-success">Veriricar</button>
<button type="button" onclick="limpar();" id="btnLimpar" class="btn btn-default">Limpar</button>
<button type="button" onclick="print();" class="btn btn-default" id="btnImprimir">Imprimir</button>
</div>
</div>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script language="JavaScript" type="text/javascript" src="campos.js"></script>
</body>
</html>
CSS:
* {
margin: 0;
padding: 0;
}
@media print {
.number { visibility:hidden; }
form { visibility:hidden; }
.botoes { visibility:hidden; }
h3 { visibility:hidden; }
#resultado {
visibility: visible;
position: absolute;
top:0;
left:0;
}
}
.content {
width: 1200px;
height: auto;
margin: 0 auto;
}
#number {
width: 600px;
height: auto;
margin: 0 auto;
margin-top: 50px;
font-size: 28pt;
font-family: verdana;
text-align: center;
}
.bgcb {
width: 80px;
height: 50px;
background-color: white;
display: inline-block;
font-size: 20pt;
border: 1px solid #d8d8d8;
border-radius: 15px;
}
.bgcbchange {
background-color: black;
}
#resultado {
width: 1200px;
font-size: 20pt;
font-family: verdana;
height: 50px;
margin: 20px;
text-align: center;
visibility: visible;
}
.item-resultado {
display: inline;
margin-left: 5px;
}
.botoes {
width: auto;
height: auto;
margin: 0px auto;
text-align: center;
}
#btnImprimir {
display: none;
text-align: center;
}
input[type=checkbox] {
padding: 10px;
}
.clear {
clear: both;
}
Carregando
default