When you click Select All, all checkboxes are marked

Question

I have the following form where the user can mark all clients at once:

When I click on Select All, it works properly, but when I uncheck one of the options, the checkbox Select All is still marked and when I uncheck the Select All and I select it again, the checkbox I unchecked previously does not uncheck, it is selected.

Below is the code. It is within a PHP method:

...
$listar = "<div class=\"rkmd-checkbox checkbox-rotate checkbox-ripple\">
           <label class=\"input-checkbox checkbox-primary\">
               <input type=\"checkbox\" id=\"marcarTodos\" onclick=\"marcarDesmarcar();\">
               <span class=\"checkbox\" style='font-weight: bold'></span>
           </label>
           <div class=\"captions\" style='font-weight: bold'>SELECIONAR TODOS</div>
          </div>";
$listar .= "<table class='table table-bordered'>
           <thead>
            <tr>
             <th style='background-color: #4682B4; color: #FFF; text-align: center'>Cliente</th>
             <th style='background-color: #4682B4; color: #FFF; text-align: center'>Compras</th>
             </thead>
             <tbody>";
$c = 1;
while($jmListar = mysqli_fetch_object($sqlListar)){
   $listar .= "<tr>";
   $listar .= "<td><input type='hidden' name='Clientes[]' value='".$jmListar->IdCadastros."'><i class=\"fa fa-caret-right\" aria-hidden=\"true\"></i> ".$jmListar->NomeUsuarios."</td>";
   $listar .= "<td>
               <div align='center'>
               <div class=\"rkmd-checkbox checkbox-rotate checkbox-ripple\">
                  <label class=\"input-checkbox checkbox-success\">
                      <input type=\"checkbox\" class='marcar' name='Comprou[]' value='S' id=\"checkbox\">
                      <span class=\"checkbox\"></span>
                  </label>
                  <div class=\"captions\">Sim</div>
                </div>
               </td>";
   $listar .= "</tr>";
$c++;
}
$listar .= "</table>";
$listar .= "</div>";
}
....

Jquery

function marcarDesmarcar()
{
  if($("#marcarTodos").prop("checked"))
  {
    $(":checkbox[name='Comprou']").attr("checked","checked");
  } else {
    $(":checkbox[name='Comprou']").removeAttr("checked");
  }
}

Anyway, just a mess. How do I so when clicking on Select All, it check all checkboxs, but when uncheck one of them the checkbox Select All be unchecked as well?

Answer 1

You can do this way, you will have full control over the checkboxes. When one is unchecked, the "SELECT ALL" will be unchecked and vice versa:

function marcarDesmarcar()
{
   $(":checkbox[name*='Comprou']").prop("checked", $("#marcarTodos").is(":checked") ? true : false );
}

$(":checkbox[name*='Comprou']").click(function(){
   
   var mTodos = $("#marcarTodos");
   
   if(mTodos.is(":checked") && !$(this).is(":checked")){
      mTodos.prop("checked", false );
   }else{
      var cbs = $(":checkbox[name*='Comprou']");
      var allchkd = true;
      
      for(var x=0; x<cbs.length; x++){
         if(!$(cbs[x]).is(":checked")){
            allchkd = false;
            break;
         }
      }
      
      if(allchkd) mTodos.prop("checked", true );
   }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table border="1">
   <tr>
      <td>
      <input onclick="marcarDesmarcar()" id="marcarTodos" type="checkbox"> Selecionar todos
      </td>
   </tr>
   <tr>
      <td>
      <input name="Comprou[]" type="checkbox">
      </td>
   </tr>
   <tr>
      <td>
      <input name="Comprou[]" type="checkbox">
      </td>
   </tr>
</table>

Answer 2

I just fixed your code:

$(":checkbox[name='Comprou']").prop("checked",true);

Was .prop("checked","checked");. I hope to help:

function marcarDesmarcar()
{
  if($("#marcarTodos").prop("checked"))
  {
    $(":checkbox[name='Comprou']").prop("checked",true);
  } else {
    $(":checkbox[name='Comprou']").removeAttr("checked");
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" id="marcarTodos" onclick="marcarDesmarcar()">
Marcar/Desmarcar Todos
<br>
<input type="checkbox" name="Comprou">
Item 1
<br>
<input type="checkbox" name="Comprou">
Item 2