Cochez toutes les cases avec jQuery

Question

J'ai besoin d'aide avec les sélecteurs jQuery. Dire que j'ai un balisage comme indiqué ci-dessous:

<form> 
    <table> 
     <tr> 
      <td><input type="checkbox" id="select_all"/></td> 
     </tr> 
     <tr> 
      <td><input type="checkbox" name="select[]"/></td> 
     </tr> 
     <tr> 
      <td><input type="checkbox" name="select[]"/></td> 
     </tr> 
     <tr> 
      <td><input type="checkbox" name="select[]"/></td> 
     </tr> 
    </table> 
</form> 

Comment obtenir toutes les cases sauf #select_all lorsque l'utilisateur clique dessus?
Toute aide sera appréciée.

Answer 1

Un plus complet exemple qui devrait fonctionner dans votre cas:

$('#select_all').change(function() { 
    var checkboxes = $(this).closest('form').find(':checkbox'); 
    checkboxes.prop('checked', $(this).is(':checked')); 
}); 

Lorsque la case #select_all est cliqué, l'état de la case est cochée et toutes les cases de la forme actuelle sont réglées sur le même statut.

Notez que vous n'avez pas besoin d'exclure la case #select_all de la sélection car elle aura le même statut que toutes les autres. Si pour une raison quelconque ne faut exclure la #select_all, vous pouvez utiliser ceci:

var checkboxes = $(this).closest('form').find(':checkbox').not($(this)); 

Answer 2

$("form input[type='checkbox']").attr("checked" , true); 

ou vous pouvez utiliser le

:checkbox Selector

$("form input:checkbox").attr("checked" , true); 

J'ai réécrit votre code HTML et fourni un gestionnaire de clic pour la principale case

$(function(){ 
    $("#select_all").click(function() { 
     $("#frm1 input[type='checkbox'].child").attr("checked", $(this).attr("checked")); 
    }); 
}); 

<form id="frm1"> 
    <table> 
     <tr> 
      <td> 
       <input type="checkbox" id="select_all" /> 
      </td> 
     </tr> 
     <tr> 
      <td> 
       <input type="checkbox" name="select[]" class="child" /> 
      </td> 
     </tr> 
     <tr> 
      <td> 
       <input type="checkbox" name="select[]" class="child" /> 
      </td> 
     </tr> 
     <tr> 
      <td> 
       <input type="checkbox" name="select[]" class="child" /> 
      </td> 
     </tr> 
    </table> 
</form> 

Answer 3

$('.checkall').change(function() { 
    var checkboxes = $(this).closest('table').find('td').find(':checkbox'); 
    if($(this).is(':checked')) { 
     checkboxes.attr('checked', 'checked'); 
    } else { 
     checkboxes.removeAttr('checked'); 
    } 
}); 

Answer 4

simple et propre

$('#select_all').click(function() { 
    var c = this.checked; 
    $(':checkbox').prop('checked',c); 
}); 

Answer 5

$(function() { 
$('#select_all').click(function() { 
    var checkboxes = $(this).closest('form').find(':checkbox'); 
    if($(this).is(':checked')) { 
     checkboxes.attr('checked', 'checked'); 
    } else { 
     checkboxes.removeAttr('checked'); 
    } 
}); 
    }); 

Answer 6

$(document).ready(function(){ 
    $("#select_all").click(function(){ 
     var checked_status = this.checked; 
     $("input[name='select[]']").each(function(){ 
     this.checked = checked_status; 
     }); 
    }); 
    }); 

Answer 7

Top réponse ne fonctionnera pas dans Jquery 1.9+ à cause de la méthode attr(). Utilisez prop() à la place.

$(function() { 
    $('#select_all').change(function(){ 
     var checkboxes = $(this).closest('form').find(':checkbox'); 
     if($(this).prop('checked')) { 
      checkboxes.prop('checked', true); 
     } else { 
      checkboxes.prop('checked', false); 
     } 
    }); 
}); 

Answer 8

$("#select_all").live("click", function(){ 
      $("input").prop("checked", $(this).prop("checked")); 
    } 
    }); 

Answer 9

$ ("# select_all") changement (function() {

$ ('entrée [type = "checkbox"]') prop (. "checked", $ (this) .prop ("checked"));

});

Answer 10

Je suis maintenant partial à ce style.

J'ai nommé votre formulaire et ajouté un 'onClick' à votre boîte select_all.

J'ai également exclu la case à cocher 'select_all' du sélecteur jquery pour empêcher l'explosion d'Internet lorsque quelqu'un clique dessus.

function toggleSelect(formname) { 
    // select the form with the name 'formname', 
    // then all the checkboxes named 'select[]' 
    // then 'click' them 
    $('form[name='+formname+'] :checkbox[name="select[]"]').click() 
} 

---

<form name="myform"> 
    <tr> 
     <td><input type="checkbox" id="select_all"  
        onClick="toggleSelect('myform')" /> 
     </td> 
    </tr> 
    <tr> 
     <td><input type="checkbox" name="select[]"/></td> 
    </tr> 
    <tr> 
     <td><input type="checkbox" name="select[]"/></td> 
    </tr> 
    <tr> 
     <td><input type="checkbox" name="select[]"/></td> 
    </tr> 
</table> 

Answer 11

Voici un plugin jQuery de base, j'ai écrit qui sélectionne toutes les cases à cocher sur la page, à l'exception de la case à cocher/élément qui doit être utilisé comme levier:

(function($) { 
    // Checkbox toggle function for selecting all checkboxes on the page 
    $.fn.toggleCheckboxes = function() { 
     // Get all checkbox elements 
     checkboxes = $(':checkbox').not(this); 

     // Check if the checkboxes are checked/unchecked and if so uncheck/check them 
     if(this.is(':checked')) { 
      checkboxes.prop('checked', true); 
     } else { 
      checkboxes.prop('checked', false); 
     } 
    } 
}(jQuery)); 

Puis appelez simplement la fonction sur votre case à cocher ou élément de bouton:

// Check all checkboxes 
$('.check-all').change(function() { 
    $(this).toggleCheckboxes(); 
}); 

Answer 12

jQuery(document).ready(function() { 
     jQuery('.select-all').on('change', function() { 
      if (jQuery(this).is(':checked')) { 
       jQuery('input.class-name').each(function() { 
        this.checked = true; 
       }); 
      } else { 
       jQuery('input.class-name').each(function() { 
        this.checked = false; 
       }); 
      } 
     }); 
    }); 

Answer 13

Ce code fonctionne très bien avec moi

<script type="text/javascript"> 
$(document).ready(function(){ 
$("#select_all").change(function(){ 
    $(".checkbox_class").prop("checked", $(this).prop("checked")); 
    }); 
}); 
</script> 

vous suffit d'ajouter la classe checkbox_class à tous case

facile et simple: D

Answer 14

Face au problème , aucune des réponses ci-dessus ne fonctionne pas. La raison était dans le plugin jQuery uniforme (travail avec theme metronic) .Je espère que la réponse sera utile :)

Travailler avec les jQuery Uniforme

$('#select-all').change(function() { 
    var $this = $(this); 
    var $checkboxes = $this.closest('form') 
     .find(':checkbox'); 

    $checkboxes.prop('checked', $this.is(':checked')) 
     .not($this) 
     .change(); 
}); 

Answer 15

une case à cocher pour gouverner les tous

Pour les personnes qui cherchent encore pour plugin pour contrôler les cases à cocher par un léger, a un support prêt à l'emploi pour UniformJS et iCheck et est décochée quand au moins l'une des cases contrôlées est décochée (et est vérifiée lorsque toutes les cases contrôlées sont bien sûr vérifiées) J'ai créé un jQuery checkAll plugin.

N'hésitez pas à vérifier les exemples sur documentation page.

---

Pour cet exemple de question tout ce que vous devez faire est:

$('#select_all').checkall({ 
    target: 'input[type="checkbox"][name="select"]' 
}); 

est-ce pas clair et simple?