CheckBox that selects all

1

I have a list of several checkboxes, and I wanted the last checkbox to be to select and deselect all the others. Example :

if (document.getElementById("all").checked = true){
    //selecionar todas
}

if (document.getElementById("all").checked = false){
   //des-selecionar todas
}
1<input type="checkbox"  id=1 name=1>
2<input type="checkbox"  name=2>
3<input type="checkbox"  name=3>
4<input type="checkbox"  name=4>
5<input type="checkbox"  name=5>
<p>Todas<input type="checkbox"  id=all name=all></p>
    
asked by anonymous 05.03.2015 / 11:36

4 answers

3

Select the desired checkbox , and assign it the function onclick :

document.querySelector("input[name=all]").onclick = function() {

Select the other checkboxes (in your example they are all, but the ideal would be to use classes for this):

    var lista = document.querySelectorAll("input");

Walk through them

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

And assign your property checked to true .

        lista[i].checked = true;
};

Full example . If you want to either mark or uncheck (depending on whether the last one is checked or not) then you must first select the new value:

document.querySelector("input[name=all]").onclick = function(e) {
    var marcar = e.target.checked; // A verificação ocorre depois que o valor já mudou

And then use it in the other checkboxes :

    var lista = document.querySelectorAll("input");
    for ( var i = 0 ; i < lista.length ; i++ )
        lista[i].checked = marcar;
};

Updated example .

    
05.03.2015 / 11:52
2

You can do this by Javascript, associating the action with a main CheckBox that will select all the others. Here's an example, where you select all CheckBoxes by the CSS class checkbox1 :

<input type="checkbox" id="selecctall"/> Selecionar tudo
<br /><input class="checkbox1" type="checkbox" name="check[]" value="item1"> Item 1
<br /><input class="checkbox1" type="checkbox" name="check[]" value="item2"> Item 2
<br /><input class="checkbox1" type="checkbox" name="check[]" value="item3"> Item 3
<br /><input class="checkbox1" type="checkbox" name="check[]" value="item4"> Item 4
<br /><input class="checkbox1" type="checkbox" name="check[]" value="item5"> Item 5
<br /><input class="checkbox1" type="checkbox" name="check[]" value="item6"> Item 6
<br /><input class="checkbox2" type="checkbox" name="check[]" value="item6"> Esta não seleciona

Javascript:

$(document).ready(function() {
    $('#selecctall').click(function(event) {  //on click 
        if(this.checked) { // check select status
            $('.checkbox1').each(function() { //loop through each checkbox
                this.checked = true;  //select all checkboxes with class "checkbox1"               
            });
        }else{
            $('.checkbox1').each(function() { //loop through each checkbox
                this.checked = false; //deselect all checkboxes with class "checkbox1"                       
            });         
        }
    });

link

    
05.03.2015 / 11:50
1

Other users have provided interesting solutions, but here's an alternative if you find it interesting, I'll put it in javascript and jquery:

  

Reversal of Selections

JQUERY

$(document).on('click', '#all', function (e) {
    $('input[type="checkbox"]').not('#all').each(function() {
        var checked = $(this).is(':checked');
        checked ? $(this).prop('checked', false) : $(this).prop('checked', true);
    });
});

JAVASCRIPT

document.getElementById("all").addEventListener("click", function(){
    checkBoxs = document.querySelectorAll('input[type="checkbox"]:not([id=all])');
    //"Hack": http://toddmotto.com/ditch-the-array-foreach-call-nodelist-hack/
    [].forEach.call(checkBoxs, function(checkbox) {
        checkbox.checked = checkbox.checked ? false : true;
    });
});

Example: link

EDIT

  

Select / Deselect All

var checkedAll = false;

//JQUERY
$(document).on('click', '#all', function (e) {
    $('input[type="checkbox"]').not('#all').each(function() {
        //Verificamos se é a hora de dar checked a todos ou tirar;
        checkedAll ? $(this).prop('checked', false) : $(this).prop('checked', true);
    });
    //Invertemos ao final da execução, caso a última tenha sido true para checar todos, tornamos ele false para o próximo clique;
    checkedAll = checkedAll ? false : true;
});

//JAVASCRIPT
document.getElementById("all").addEventListener("click", function(){
    checkBoxs = document.querySelectorAll('input[type="checkbox"]:not([id=all])');
    //"Hack": http://toddmotto.com/ditch-the-array-foreach-call-nodelist-hack/
    [].forEach.call(checkBoxs, function(checkbox) {
        //Verificamos se é a hora de dar checked a todos ou tirar;
        checkbox.checked = checkedAll ? false : true;
    });
    //Invertemos ao final da execução, caso a última tenha sido true para checar todos, tornamos ele false para o próximo clique;
    checkedAll = checkedAll ? false : true;
});

Example: link

If you have any questions or are not what you are looking for, please let us know.

    
05.03.2015 / 12:45
0

Resolved:

function marcarTodos(marcar){
    var itens = document.querySelectorAll("input");

    var i = 0;
    for(i=0; i<itens.length;i++){
        itens[i].checked = marcar;
    }
}
    
18.08.2018 / 00:09