When you click Select All, all checkboxes are checked

Navigation
1

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

WhenIclickSelectAll,itworkscorrectly,butwhenIuncheckoneoftheoptions,theSelectAllcheckboxisstillchecked,andwhenIuncheckSelectAllandIselectitagain,thecheckboxthatIpreviouslyuncheckeddoesnotuncheck,itisselected.

Followthecodebelow.It'sinsideamethodinPHP:

...$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");
  }
}

At last, a mess only. How do I click Select All , it marks all the checkboxes, but when you uncheck one of them, the Select All checkbox is unchecked too?

    
asked by anonymous 03.04.2018 / 02:14

2 answers

1

You can do this, you will have full control over the checkboxes. When some is deselected, the "SELECT ALL" will be deselected 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><tableborder="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>
    
03.04.2018 / 02:38
1

Just fix your code: 

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

It 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><inputtype="checkbox" id="marcarTodos" onclick="marcarDesmarcar()">
Marcar/Desmarcar Todos
<br>
<input type="checkbox" name="Comprou">
Item 1
<br>
<input type="checkbox" name="Comprou">
Item 2
    
03.04.2018 / 02:51
MySQL query with infinite loop Receiving Json with empty arguments