web-dev-qa-db-fra.com

Cochez toutes les cases avec jQuery

J'ai besoin d'aide avec les sélecteurs jQuery. Dites 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 à cocher sauf #select_all quand l'utilisateur clique dessus?
Toute aide serait appréciée.

jquerycheckboxcss-selectors
63
Darmen

Un exemple plus complet 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 à cocher #select_all est cochée, son statut est coché et toutes les cases du formulaire actuel sont définies sur le même statut.

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

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

simple et propre

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

La meilleure réponse ne fonctionnera pas dans Jquery 1.9+ en raison 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);
        }
    });
});
29
ademin
$("form input[type='checkbox']").attr( "checked" , true );

ou vous pouvez utiliser le

: sélecteur de case à cocher

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

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

$(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>
15
rahul
 $(document).ready(function(){
    $("#select_all").click(function(){
      var checked_status = this.checked;
      $("input[name='select[]']").each(function(){
        this.checked = checked_status;
      });
    });
  });
3
Beena Shetty
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;
                });
            }
        });
    });
3
Abdo-Host
 $(function() {  
$('#select_all').click(function() {
    var checkboxes = $(this).closest('form').find(':checkbox');
    if($(this).is(':checked')) {
        checkboxes.attr('checked', 'checked');
    } else {
        checkboxes.removeAttr('checked');
    }
});
    });
3
Dragos Custura
$("#select_all").change(function () {

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

});
2
Robin Li

Ce code fonctionne bien avec moi 

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

il vous suffit d'ajouter la classe checkbox_class à toutes les cases à cocher

Facile et simple: D

2
Ahmed Al Bermawy

Face au problème, aucune des réponses ci-dessus ne fonctionne. La raison en était dans le plugin jQuery Uniform (travaillez avec theme metronic ). J'espère que la réponse vous sera utile :)

Travailler avec jQuery Uniform

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

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

Une case à cocher pour les gouverner tous

Pour les personnes qui recherchent toujours un plugin pour contrôler les cases à cocher via une interface légère, prend en charge immédiatement UniformJS et iCheck et est décochée lorsque au moins une des cases à cocher contrôlée est décochée (et est cochée lorsque toutes les cases à cocher contrôlées sont cochées) bien sûr) j'ai créé un plugin jQuery checkAll .

N'hésitez pas à consulter les exemples sur page de documentation .

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

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

N'est-ce pas clair et simple?

1
simivar
$('.checkall').change(function() {
    var checkboxes = $(this).closest('table').find('td').find(':checkbox');
    if($(this).is(':checked')) {
        checkboxes.attr('checked', 'checked');
    } else {
        checkboxes.removeAttr('checked');
    }
});
0
user955787
  $("#select_all").live("click", function(){
            $("input").prop("checked", $(this).prop("checked"));
    }
  });
0
user2821486

Voici un plugin jQuery de base que j'ai écrit qui sélectionne toutes les cases à cocher de la page, à l'exception de la case à cocher/de l'élément à utiliser comme bascule:

(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));

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

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

Je suis maintenant partial à ce style.

J'ai nommé votre formulaire et ajouté un "onClick" à votre zone select_all.

J'ai également exclu la case à cocher "select_all" du sélecteur jQuery pour empêcher Internet d'exploser 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>

0
FlipMcF