select and count checkbox

Asked

Viewed 349 times

2

I cannot hit the code below: the total variable does not sum in countCheckedCheckboxes. And when you click the button mark all but uncheck some and click on the button again what was marked descends and what was down is marked.

SCRIPT 

var total=0;
function checkAll(theForm, cName) {
    for (i=0,n=theForm.elements.length;i<n;i++){
        if (theForm.elements[i].className.indexOf(cName) !=-1)
            theForm.elements[i].checked = !(theForm.elements[i].checked);   
     }
        total = $('input[type=checkbox]:checked').length;
}

$(document).ready(function(){

    var $checkboxes = $('#checkbox_form td input[type="checkbox"]');

    $checkboxes.change(function(){   
        var countCheckedCheckboxes = $checkboxes.filter(':checked').length;
        countCheckedCheckboxes=(countCheckedCheckboxes+total);

        $('#count-checked-checkboxes').text(countCheckedCheckboxes);
    });

});
javascript

2 answers

1


I have achieved my goal and I will share the code:

var w=0;
var y=0;
function checkAll(theForm, cName, status) {

for (i=0,n=theForm.elements.length;i<n;i++)
    if (theForm.elements[i].className.indexOf(cName) !=-1) {
      theForm.elements[i].checked = status;
    }
}

    $(document).ready(function(){
        var $checkboxes = $('#checkbox_form td input[type="checkbox"]');
        $checkboxes.change(function(){   

        var meu_array = ['RIhBx','ddwkj','qmCvU','IFRtS','KiLNX','cmSEL','cAFUq','PJkBz','cEpFF','NZJhD','UfVPS','lrvnJ','ftfte','IJFNS'];

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

                $("input:checkbox[class="+meu_array[ i ]+"]").each(function () {
                    if($(this).is(":checked")==true){
                        w=1;
                    }else{
                        y=1;
                    }
                }); 

            if ((w==0) && (y==1)){
                document.getElementById(meu_array[ i ]).checked = false;
            }
            w=0;
        }   

        var tot=$('input[name="songs[]"]:checked').length;
        if (tot==0){
            $('#count-checked-checkboxes').text("");
        }else if (tot==1){
            $('#count-checked-checkboxes').text(tot+" selecionada");
        }else{
            $('#count-checked-checkboxes').text(tot+" selecionadas");
        }

    });
});

0

I think this will help you, Leo. I used Jquery because I saw that Voce made the use and separated the checkbox by CSS class, as it may be that I want to select and check a certain set of checkbox.

$("#btnAll").click(function(){
       // $(":checkbox") Poderia usar este tbm .. só que irá pegar todos os checkbox do seu document
       $(".carro").prop( "checked", true);
       countCarroSelecionados();
});

$("#btnClear").click(function(){
       // $(":checkbox") Poderia usar este tbm .. só que irá pegar todos os checkbox do seu document
       $(".carro").prop( "checked", false);
       countCarroSelecionados();
});

$("#btnShowResult").click(function(){
       countCarroSelecionados();
});

function countCarroSelecionados(){
 var checkBoxs = 	$( ".carro" ).filter(function() {
    return $(this).prop('checked');
  	});
  alert(checkBoxs.length);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<body>
<form action="">
<button id="btnAll" type="button">
  Selecionar Todos
</button>
<button type="button" id="btnClear">
  Limpar
</button>
<button type="button" id="btnShowResult">
  Resultado
</button>
<br>
<input type="checkbox" class="carro" value="mustang">Mustang
  <input type="checkbox" class="carro" value="camaro">Camaro
  <input type="checkbox" class="carro" value="veloster">Veloster
  
</form>
</body>
</html>

  • Thanks for the answer but there are several groups and each with a class. There are three hundred classes

  • in this example the developer also used class. You can put them inside a div and for each div go through the DOM p/ see if there is checkbox p/ mark. But I see that your need will really take work to separate the checkbox groups.

Browser other questions tagged javascript

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