How to count selected checkbox quantity

Asked

Viewed 11,971 times

9

I’m trying to make a code that checks how many checkboxes are checked by clicking a button, because I’m making a system that duplicates records. I have a list with several checkboxes, and when the person clicks on the "duplicate" button jQuery will check which ones are marked and get the value of them. I have no idea how to do it, because I tried it in various ways and nothing. The last code I tried was this:

<script>
(document).ready(function(){

    $("#duplicar-registro").on('click', function(){

        var checkbox = $("#mcheckbox");

        for(i=0;i<= checkbox.length;i++){

            if($("input[id=mcheckbox]:checked") == true){

                console.log(i); //Ver no console
            }else{

                console.log(i); //Ver no console também
            }
        }
    })
});
</script>
jquery checkbox

2 answers

7


To take the values of checkbox selected, you must first change the selector of your function. No more than one element is allowed with the same id, then I suggest using the name of checkbox or a class for this, follow example of suggested implementation:

HTML 

<label><input type="checkbox" value="1" name="mcheckbox[]" /> 1</label>
<label><input type="checkbox" value="2" name="mcheckbox[]" /> 2</label>
<label><input type="checkbox" value="3" name="mcheckbox[]" /> 3</label>
<label><input type="checkbox" value="4" name="mcheckbox[]" /> 4</label>
<label><input type="checkbox" value="5" name="mcheckbox[]" /> 5</label>
<button type="button" id="duplicar-registro">Duplicar Registro</button>

jQuery

 $('#duplicar-registro').click(function () {
    //seletor para os checkbox com name mcheckbox selecionados
    var checkbox = $('input:checkbox[name^=mcheckbox]:checked');
    //verifica se existem checkbox selecionados
    if(checkbox.length > 0){
        //array para armazenar os valores
        var val = [];
        //função each para pegar os selecionados
        checkbox.each(function(){
            val.push($(this).val());
        });
        //exibe no console o array com os valores selecionados
        console.log(val);
    } 
});

Example: Jsfiddle

  • I believe the example is not working!

  • @Gabrielborghi I believe that due to Jsfiddle update jQuery is not included, see here http://jsfiddle.net/UtL36/31/

  • It doesn’t work for me, but beauty was only to be sure in case someone needs it, but the code already helped me worth.

6

Example: Demo

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>CheckBox Selecionados</title>
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
</head>
<body>
    <input type="checkbox" value="1" name="check1" id="check1">1<br>
    <input type="checkbox" value="2" name="check2" id="check2">2<br>
    <input type="checkbox" value="3" name="check3" id="check3">3<br>
    <input type="checkbox" value="4" name="check4" id="check4">4<br>
    <input type="button" value="Verificar" id="btnverificar" name="btnverificar">    
    <script type="text/javascript">
        $(document).ready(function(e) {
            $("#btnverificar").click(function(e) {
                $.each(($("input[type=checkbox]:checked")), function(index, obj){
                    console.log(obj.value);
                });
            });         
        });
    </script>  
</body>
</html>

Browser other questions tagged jquery checkbox

You are not signed in. Login or sign up in order to post.