Check and uncheck all checkboxes

Asked

Viewed 887 times

0

First, there’s this question about Check/Uncheck all checkboxes except disabled checkboxes, however I do not want you to uncheck what is already marked when you click again. I want you to uncheck all the checkboxes, but if you have an appointment, it must remain marked.

The idea is to check whether most checkboxes are marked, then uncheck them. Otherwise, mark them.

I have the following code below, see:

$(document).on("click", "#checkAll", function(){
    $('input[type="checkbox"]').prop("checked",  true);      
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
    <tr>
        <td><input type="checkbox"/>Jon Snow</td>
    </tr>
    <tr>
        <td><input type="checkbox"/>Tony Stark</td>
    </tr>
    <tr>
        <td><input type="checkbox"/>Paul McCartney</td>
    </tr>
    <tr>
        <td><input type="checkbox"/>Luke Skywalker</td>
    </tr>
     <tr>
        <td><input type="checkbox"/>Pablo Escobar</td>
    </tr>
</table>

 <button style="float: left;" type="button" class="btn btn-default btn-xs" id="checkAll">Botão</button>

I would like you to click again, uncheck the checkboxs. What better way to do it?

  • 3

    Your question was confused. If you have 2 checked and click the button, what should happen?

  • @Davidsamm if you have two 2 marked and you have not once clicked on everything, he must mark the rest that are unchecked.

  • You want to check if the "mark all" button has been clicked before?

  • If I understand, you just want to know if at least half of the boxes are marked. If so, clear everything, otherwise check those that are empty.

  • @Davidsamm if this is a way out, it could be. What I don’t want is for it to be the same as the answer to the question I mentioned https://jsfiddle.net/wzeobpf2/. Because the moment I click on mark everything [example], it unchecks those that are already marked. [How difficult to explain =/]

1 answer

0


The question was not very clear so I was able to do this, check if you answer and otherwise post in the comment so I can help you.

$(function(){
  $('#checkAll').click(function(){
    let desmarcados = $('input:checkbox:not(:checked)').length;
    let marcados = $('input:checkbox:checked').length;
    console.log(marcados);
    console.log(desmarcados);
    if(marcados > desmarcados){
       $('input:checkbox').prop("checked", false);
    }else{
      $('input:checkbox').prop("checked", true);
    }
    
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <table>
        <tr>
            <td><input type="checkbox"/>Jon Snow</td>
        </tr>
        <tr>
            <td><input type="checkbox"/>Tony Stark</td>
        </tr>
        <tr>
            <td><input type="checkbox"/>Paul McCartney</td>
        </tr>
        <tr>
            <td><input type="checkbox"/>Luke Skywalker</td>
        </tr>
    </table>

     <button style="float: left;" type="button" class="btn btn-default btn-xs" id="checkAll">Marcar tudo</button>

  • That’s right... I just couldn’t express it right. VLW.

  • The above code does not work as explained when half the boxes are checked. You would have to change the line marcados > desmarcados for marcados >= desmarcados.

  • @Davidsamm did not understand your comment right, could explain me better so I can improve the answer.

  • "Marked" shall be GREATER THAN OR EQUAL TO HALF (>=) number of boxes, and not HIGHER (>).

  • The author : 'The idea is to check if most checkboxes are checked' , so I thought it was >

Browser other questions tagged

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