if/Else condition to mark/deselect checkbox

Question

I wonder what a condition it would be to cancel all my ckeckbox.

function marcarDesmarcarTodos() {
    for (i = 0; i <= 500; i++) {
        document.getElementById('seleciona_ativarDesativar_'+i).checked = true;
    }
}

I tried it this way, but it didn’t work.

function marcarDesmarcarTodos() {
    for (i = 0; i <= 500; i++) {
        if (document.getElementById('seleciona_ativarDesativar_'+i) != 'checked') {
            document.getElementById('seleciona_ativarDesativar_'+i).checked = true;
        } else {
            document.getElementById('seleciona_ativarDesativar_'+i).checked = false;
        }
    }
}

Answer 1

You need to get those checkbox, for example with:

document.querySelectorAll('input[type=checkbox]');

and then burn them by changing the checked for false.

Now you have different options:

• Reverse the state
• Force all/ none

Reverse the state:

function marcarDesmarcarTodos() {
    var checkboxes = document.querySelectorAll('input[type=checkbox]');
    for (var i = 0; i < checkboxes.length; i++) {
        checkboxes[i].checked = !checkboxes[i].checked;
    }
}

jsFiddle: http://jsfiddle.net/nwvgyd3d/

Force all/ none

In this case you can use a flag to save status. It could also be stored in the input data-estado, but in the example I use a variable for this.

var estado = false;
function marcarDesmarcarTodos() {
    var checkboxes = document.querySelectorAll('input[type=checkbox]');
    for (var i = 0; i < checkboxes.length; i++) {
        checkboxes[i].checked = !estado;
    }
    estado = !estado;
}

jsFiddle: http://jsfiddle.net/nwvgyd3d/1/

Answer 2

Look for the function each of JS, using jQuery...

Its use is very simple:

$("input[type='checkbox']").each(function(){
     this.checked = false;
});

Example

Answer 3

You can use this function JS:

function marcarDesmarcar(source) {
  checkboxes = document.getElementsByName('foo');
  for(var i=0, n=checkboxes.length;i<n;i++) {
    checkboxes[i].checked = source.checked;
  }
}                   

<input type="checkbox" onClick="marcarDesmarcar(this)" /> Marcar e Desmarcar todos<br/>
  
<input type="checkbox" name="foo" value="bar1"> check 1<br/>
<input type="checkbox" name="foo" value="bar2"> check 2<br/>
<input type="checkbox" name="foo" value="bar3"> check 3<br/>
<input type="checkbox" name="foo" value="bar4"> check 4<br/>