Mark / Uncheck Checkbox from a button


I would like to use a button to be able to Mark / Uncheck checkbox. I have this button that calls a function, see:

<button class='btn btn-large' type='button' title='Todos' id='todos' onclick='marcardesmarcar();' ><i class='icon-large  icon-ok'></i></button>

The function:

    function marcardesmarcar(){
           if ($(".marcar").prop( "checked")) 
           $(this).attr("checked", false);
           else $(this).attr("checked", true);               

The checks are as follows:

<input type='checkbox' class='marcar' name='check[]'/>

This script does the right thing the first time, but on the second it does nothing.

asked by anonymous 30.05.2014 / 21:19

6 answers


Test like this:

function marcardesmarcar(){
        function() {
            if ($(this).prop("checked")) {
                $(this).prop("checked", false);
            } else {
                $(this).prop("checked", true);
30.05.2014 / 21:33

The problem is that in if you should test this , not a collection of elements:

function marcardesmarcar() {
    $('.marcar').each(function () {
        if (this.checked) this.checked = false;
        else this.checked = true;

While testing $('.marcar').prop("checked") within if , once an element has been changed this if will give true . I assume you want to test the element that is being traversed / iterated.

Example: link

30.05.2014 / 21:26

With pure javascript you can get the element by name and assign the checked value of marcar/desmarcar todos to the others in onclick (), because getElementsByName() returns an array.

<script type="text/javascript">
    function marcarTodos(marcar){
        var itens = document.getElementsByName('cores[]');

            document.getElementById('acao').innerHTML = 'Desmarcar Todos';
            document.getElementById('acao').innerHTML = 'Marcar Todos';

        var i = 0;
        for(i=0; i<itens.length;i++){
            itens[i].checked = marcar;

    <input type="checkbox" name="cores[]" onclick="marcarTodos(this.checked);">
     <span id="acao">Marcar</span> <br>
    <input type="checkbox" name="cores[]" value="azul"> azul <br>
    <input type="checkbox" name="cores[]" value="verde"> verde <br>
    <input type="checkbox" name="cores[]" value="branco"> branco <br>
30.05.2014 / 21:31
        if ($(this).prop( "checked")){ 

    function marcardesmarcar(bool){
               $(this).prop("checked", bool);            
25.07.2016 / 19:24

I created the same script in a simpler way:

marcarTodosCheckBoxes: function (seletorCheckBoxes) {
        $(this).prop('checked', !$(this).prop('checked'));
        $(seletorCheckBoxes).prop("checked", $(this).prop("checked"));
29.07.2015 / 18:48

Good evening!

I am building a Jquery event library to be used in any project, and I was able to create this same script in this way:


   $("#ckAll").click(function()  {  // minha chk que marcará as outras

if ($("#ckAll").prop("checked"))   // se ela estiver marcada... 

$(".chk").prop("checked", true);  // as que estiverem nessa classe ".chk" tambem serão marcadas
     else $(".chk").prop("checked", false);   // se não, elas tambem serão desmarcadas


works perfectly, and I think it's simple and objective! improved on the basis of the above examples ...

12.05.2016 / 04:52