Skip to main content
citação
Fonte Link

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

comentario no codigo html
Fonte Link
<!--
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>
removido comentarios desnecessarios
Fonte Link

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;
    }
Fonte Link
Carregando