Displaying checkbox value disabled

Question

Displaying checkbox value disabled

Navigation

#1 by (2 votes)
#2 by (1 votes)
#3 by (0 votes)

0

Hello, I created a very simple system where I enable 10 values of 25 and I want it to display with an innerHTML those that are disabled, I made this system with checkbox and I was putting them in variables and then doing it one by one .

I'm a beginner in programming and I know there might be a simpler way to do this, follow the example below.

System running: link

//DEFININDO VARIÃVEIS GLOBAIS (SEM O "var")
		r1 = document.getElementById("myRadio01");
		r2 = document.getElementById("myRadio02");
		r3 = document.getElementById("myRadio03");
		r4 = document.getElementById("myRadio04");
		r5 = document.getElementById("myRadio05");
		r6 = document.getElementById("myRadio06");
		r7 = document.getElementById("myRadio07");
		r8 = document.getElementById("myRadio08");
		r9 = document.getElementById("myRadio09");
		r10 = document.getElementById("myRadio10");
		r11 = document.getElementById("myRadio11");
		r12 = document.getElementById("myRadio12");
		r13 = document.getElementById("myRadio13");
		r14 = document.getElementById("myRadio14");
		r15 = document.getElementById("myRadio15");
		r16 = document.getElementById("myRadio16");
		r17 = document.getElementById("myRadio17");
		r18 = document.getElementById("myRadio18");
		r19 = document.getElementById("myRadio19");
		r20 = document.getElementById("myRadio20");
		r21 = document.getElementById("myRadio21");
		r22 = document.getElementById("myRadio22");
		r23 = document.getElementById("myRadio23");
		r24 = document.getElementById("myRadio24");
		r25 = document.getElementById("myRadio25");
		bgradio = document.getElementsByClassName("bgradio");
		exiberesultado = document.getElementById("resultado");

	function verificar() {
		resultado01 = document.getElementById("resultado01");
		resultado02 = document.getElementById("resultado02");
		resultado03 = document.getElementById("resultado03");
		resultado04 = document.getElementById("resultado04");
		resultado05 = document.getElementById("resultado05");
		resultado06 = document.getElementById("resultado06");
		resultado07 = document.getElementById("resultado07");
		resultado08 = document.getElementById("resultado08");
		resultado09 = document.getElementById("resultado09");
		resultado10 = document.getElementById("resultado10");
		resultado11 = document.getElementById("resultado11");
		resultado12 = document.getElementById("resultado12");
		resultado13 = document.getElementById("resultado13");
		resultado14 = document.getElementById("resultado14");
		resultado15 = document.getElementById("resultado15");
		resultado16 = document.getElementById("resultado16");
		resultado17 = document.getElementById("resultado17");
		resultado18 = document.getElementById("resultado18");
		resultado19 = document.getElementById("resultado19");
		resultado20 = document.getElementById("resultado20");
		resultado21 = document.getElementById("resultado21");
		resultado22 = document.getElementById("resultado22");
		resultado23 = document.getElementById("resultado23");
		resultado24 = document.getElementById("resultado24");
		resultado25 = document.getElementById("resultado25");
		btnImprimir = document.getElementById("btnImprimir");

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

		if (r1.checked == false) {resultado01.innerHTML = "01";}
		if (r2.checked == false) {resultado02.innerHTML = "02";}
		if (r3.checked == false) {resultado03.innerHTML = "03";}
		if (r4.checked == false) {resultado04.innerHTML = "04";}
		if (r5.checked == false) {resultado05.innerHTML = "05";}
		if (r6.checked == false) {resultado06.innerHTML = "06";}
		if (r7.checked == false) {resultado07.innerHTML = "07";}
		if (r8.checked == false) {resultado08.innerHTML = "08";}
		if (r9.checked == false) {resultado09.innerHTML = "09";}
		if (r10.checked == false) {resultado10.innerHTML = "10";}
		if (r11.checked == false) {resultado11.innerHTML = "11";}
		if (r12.checked == false) {resultado12.innerHTML = "12";}
		if (r13.checked == false) {resultado13.innerHTML = "13";}
		if (r14.checked == false) {resultado14.innerHTML = "14";}
		if (r15.checked == false) {resultado15.innerHTML = "15";}
		if (r16.checked == false) {resultado16.innerHTML = "16";}
		if (r17.checked == false) {resultado17.innerHTML = "17";}
		if (r18.checked == false) {resultado18.innerHTML = "18";}
		if (r19.checked == false) {resultado19.innerHTML = "19";}
		if (r20.checked == false) {resultado20.innerHTML = "20";}
		if (r21.checked == false) {resultado21.innerHTML = "21";}
		if (r22.checked == false) {resultado22.innerHTML = "22";}
		if (r23.checked == false) {resultado23.innerHTML = "23";}
		if (r24.checked == false) {resultado24.innerHTML = "24";}
		if (r25.checked == false) {resultado25.innerHTML = "25";}
		btnImprimir.style.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");
		        }
		    });
		}
		maisque10();

		function limpar() {
			if ($('.radiobuttons').prop('checked', true)) {
				$('.radiobuttons').prop('checked', false);
				$(bgradio).removeClass('bgradiochange');
				location.reload();
			}
		}

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

	.bgradio {
		width: 80px;
		height: 50px;
		background-color: white;
		display: inline-block;
		font-size: 20pt;
		border: 1px solid #d8d8d8;
		border-radius: 15px;
	}

	.bgradiochange {
		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;
	}

<!DOCTYPE html>
<html>
<head>
	<title>Estudo</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<script language="JavaScript" type="text/javascript" src="js/jquery-1.12.4.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
	
<body>
<div class="content">
	<h3 class="text-center">Estudo</h3>
	<div id="number">
		<form name="form">
			<div class="bgradio">01<input type="checkbox" id="myRadio01" onclick="clicando01();" value="01" class="radiobuttons"></div>
			<div class="bgradio">02<input type="checkbox" id="myRadio02" onclick="clicando01();" value="02" class="radiobuttons"></div>	
			<div class="bgradio">03<input type="checkbox" id="myRadio03" onclick="clicando01();" value="03" class="radiobuttons"></div>
			<div class="bgradio">04<input type="checkbox" id="myRadio04" onclick="clicando01();" value="04" class="radiobuttons"></div>
			<div class="bgradio">05<input type="checkbox" id="myRadio05" onclick="clicando01();" value="05" class="radiobuttons"></div><br>
			<div class="bgradio">06<input type="checkbox" id="myRadio06" onclick="clicando01();" value="06" class="radiobuttons"></div>
			<div class="bgradio">07<input type="checkbox" id="myRadio07" onclick="clicando01();" value="07" class="radiobuttons"></div>	
			<div class="bgradio">08<input type="checkbox" id="myRadio08" onclick="clicando01();" value="08" class="radiobuttons"></div>
			<div class="bgradio">09<input type="checkbox" id="myRadio09" onclick="clicando01();" value="09" class="radiobuttons"></div>
			<div class="bgradio">10<input type="checkbox" id="myRadio10" onclick="clicando01();" value="10" class="radiobuttons"></div><br>
			<div class="bgradio">11<input type="checkbox" id="myRadio11" onclick="clicando01();" value="11" class="radiobuttons"></div>
			<div class="bgradio">12<input type="checkbox" id="myRadio12" onclick="clicando01();" value="12" class="radiobuttons"></div>	
			<div class="bgradio">13<input type="checkbox" id="myRadio13" onclick="clicando01();" value="13" class="radiobuttons"></div>
			<div class="bgradio">14<input type="checkbox" id="myRadio14" onclick="clicando01();" value="14" class="radiobuttons"></div>
			<div class="bgradio">15<input type="checkbox" id="myRadio15" onclick="clicando01();" value="15" class="radiobuttons"></div><br>
			<div class="bgradio">16<input type="checkbox" id="myRadio16" onclick="clicando01();" value="16" class="radiobuttons"></div>
			<div class="bgradio">17<input type="checkbox" id="myRadio17" onclick="clicando01();" value="17" class="radiobuttons"></div>	
			<div class="bgradio">18<input type="checkbox" id="myRadio18" onclick="clicando01();" value="18" class="radiobuttons"></div>
			<div class="bgradio">19<input type="checkbox" id="myRadio19" onclick="clicando01();" value="19" class="radiobuttons"></div>
			<div class="bgradio">20<input type="checkbox" id="myRadio20" onclick="clicando01();" value="20" class="radiobuttons"></div><br>
			<div class="bgradio">21<input type="checkbox" id="myRadio21" onclick="clicando01();" value="21" class="radiobuttons"></div>
			<div class="bgradio">22<input type="checkbox" id="myRadio22" onclick="clicando01();" value="22" class="radiobuttons"></div>	
			<div class="bgradio">23<input type="checkbox" id="myRadio23" onclick="clicando01();" value="23" class="radiobuttons"></div>
			<div class="bgradio">24<input type="checkbox" id="myRadio24" onclick="clicando01();" value="24" class="radiobuttons"></div>
			<div class="bgradio">25<input type="checkbox" id="myRadio25" onclick="clicando01();" value="25" class="radiobuttons"></div><br>
		</form>
	</div>

	<ul id="resultado">
			<li id="resultado01" class="item-resultado"></li>
			<li id="resultado02" class="item-resultado"></li>
			<li id="resultado03" class="item-resultado"></li>
			<li id="resultado04" class="item-resultado"></li>
			<li id="resultado05" class="item-resultado"></li>
			<li id="resultado06" class="item-resultado"></li>
			<li id="resultado07" class="item-resultado"></li>
			<li id="resultado08" class="item-resultado"></li>
			<li id="resultado09" class="item-resultado"></li>
			<li id="resultado10" class="item-resultado"></li>
			<li id="resultado11" class="item-resultado"></li>
			<li id="resultado12" class="item-resultado"></li>
			<li id="resultado13" class="item-resultado"></li>
			<li id="resultado14" class="item-resultado"></li>
			<li id="resultado15" class="item-resultado"></li>
			<li id="resultado16" class="item-resultado"></li>
			<li id="resultado17" class="item-resultado"></li>
			<li id="resultado18" class="item-resultado"></li>
			<li id="resultado19" class="item-resultado"></li>
			<li id="resultado20" class="item-resultado"></li>
			<li id="resultado21" class="item-resultado"></li>
			<li id="resultado22" class="item-resultado"></li>
			<li id="resultado23" class="item-resultado"></li>
			<li id="resultado24" class="item-resultado"></li>
			<li id="resultado25" 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>
<script src="bootstrap.min.js"></script>
<script language="JavaScript" type="text/javascript" src="js/campos.js"></script>
<script language="JavaScript" type="text/javascript" src="js/js.js"></script>

</body>
</html>

javascript html jquery css checkbox

asked by anonymous 05.10.2016 / 14:25

3 answers

1

I have refined your code so you can have an example of how your logic can be simpler.

I did not redo everything from scratch, I just edited some parts that I found obvious using loops and arrays.

PS: Fixed your function more than 10 (). I added the e.preventDefault (), in your code the user could continue checking the checkboxes even after exceeding the limit of 10

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:

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

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

05.10.2016 / 16:05

0

Here's another example for you to analyze:

$('.numeros .btn input').click(function(e) {
  if ($('.numeros .btn input:checked').length > 10) {
    alert('Voce selecionou 10 numeros');
    return false;
  }
  e.stopPropagation();
}).change(function() {
  if ($('.numeros .btn input:checked').length <= 10) $(this).parent('.btn').toggleClass('btn-default btn-primary');
});

$('.numeros .btn').click(function() {
  $('input', this).click();
});

$('.verificar').click(function() {
  $('.resultado').html('');
  $('.numeros .btn input').each(function(i) {
    var span = $('<span class="label"></span>').html($(this).siblings('span').html());
    $('.resultado').append(span, ' ');
    if (this.checked) span.addClass('label-primary');
    else span.addClass('label-default');
  });
});

$('.limpar').click(function() {
  $('.resultado').html('&nbsp;');
  $('.numeros .btn input').each(function(i) {
    if (this.checked) $(this).click();
  });
});

$('.imprimir').click(function() {
  window.print();
});

.numeros .btn,
.resultado,
.botoes {
  margin: 8px 8px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><linkrel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>


<div class="container">
  <div class="row">
    <div class="numeros col-sm-8 col-sm-offset-2 text-center">
      <h1>Estudos</h1>
      <a class="btn btn-lg btn-default" href="#"><span>01</span> <input type="checkbox"></a>
      <a class="btn btn-lg btn-default" href="#"><span>02</span> <input type="checkbox"></a>
      <a class="btn btn-lg btn-default" href="#"><span>03</span> <input type="checkbox"></a>
      <a class="btn btn-lg btn-default" href="#"><span>04</span> <input type="checkbox"></a>
      <a class="btn btn-lg btn-default" href="#"><span>05</span> <input type="checkbox"></a>
      <a class="btn btn-lg btn-default" href="#"><span>06</span> <input type="checkbox"></a>
      <a class="btn btn-lg btn-default" href="#"><span>07</span> <input type="checkbox"></a>
      <a class="btn btn-lg btn-default" href="#"><span>08</span> <input type="checkbox"></a>
      <a class="btn btn-lg btn-default" href="#"><span>09</span> <input type="checkbox"></a>
      <a class="btn btn-lg btn-default" href="#"><span>10</span> <input type="checkbox"></a>
      <a class="btn btn-lg btn-default" href="#"><span>11</span> <input type="checkbox"></a>
      <a class="btn btn-lg btn-default" href="#"><span>12</span> <input type="checkbox"></a>
      <a class="btn btn-lg btn-default" href="#"><span>13</span> <input type="checkbox"></a>
      <a class="btn btn-lg btn-default" href="#"><span>14</span> <input type="checkbox"></a>
      <a class="btn btn-lg btn-default" href="#"><span>15</span> <input type="checkbox"></a>
      <a class="btn btn-lg btn-default" href="#"><span>16</span> <input type="checkbox"></a>
      <a class="btn btn-lg btn-default" href="#"><span>17</span> <input type="checkbox"></a>
      <a class="btn btn-lg btn-default" href="#"><span>18</span> <input type="checkbox"></a>
      <a class="btn btn-lg btn-default" href="#"><span>19</span> <input type="checkbox"></a>
      <a class="btn btn-lg btn-default" href="#"><span>20</span> <input type="checkbox"></a>
      <a class="btn btn-lg btn-default" href="#"><span>21</span> <input type="checkbox"></a>
      <a class="btn btn-lg btn-default" href="#"><span>22</span> <input type="checkbox"></a>
      <a class="btn btn-lg btn-default" href="#"><span>23</span> <input type="checkbox"></a>
      <a class="btn btn-lg btn-default" href="#"><span>24</span> <input type="checkbox"></a>
      <a class="btn btn-lg btn-default" href="#"><span>25</span> <input type="checkbox"></a>
    </div>
    <div class="row">
      <div class="resultado col-xs-12 text-center">
        &nbsp;
      </div>
    </div>
    <div class="row">
      <div class="botoes col-xs-12 text-center">
        <button type="button" class="verificar btn btn-success">Verificar</button>
        <button type="button" class="limpar btn btn-default">Limpar</button>
        <button type="button" class="imprimir btn btn-default">Imprimir</button>
      </div>
    </div>
  </div>
</div>

06.10.2016 / 01:26

MySQL query excluding empty LINES [duplicate] How do I do when I click on a button to see another one below [closed]

score 2 · Accepted Answer

Here's an example in jQuery if you want to apply in your study:
* You can modify the validations of if else for your need to display alert .
HTML

<input type="checkbox" class="check" value="1"/>
<input type="checkbox" class="check" value="2"/>
<input type="checkbox" class="check" value="3"/>
<button id="ir">Ir</button/>
<div class="result_check"></div>

jQuery

$(function(){ $("#ir").click(function(){
  $(".result_check").html("");
  $(".check").each(function(){
     var val = $(this).val();
     var sit = $(this).prop("checked");
     if(val > 0 && sit == false){
        $(".result_check").append(val+" No Check ");
     }else{}
    });
   });
 });