web-dev-qa-db-fra.com

Cliquez pour basculer avec jQuery

J'ai utilisé une fonction de survol où vous faites x sur mouseover et y et mouseout. J'essaie la même chose pour click mais cela ne semble pas fonctionner:

$('.offer').click(function(){ 
  $(this).find(':checkbox').attr('checked', true ); 
},function(){
  $(this).find(':checkbox').attr('checked', false ); 
});

Je veux que la case à cocher soit cochée lorsque vous cliquez sur un div et décochée si vous cliquez à nouveau - une bascule de clic.

jqueryonclicktoggle
70
3zzy

Ceci est facilement fait en retournant l'état actuel de la case à cocher 'coché' à chaque clic. Exemples:

 $(".offer").on("click", function () { 
       var $checkbox = $(this).find(':checkbox');
       $checkbox.attr('checked', !$checkbox.attr('checked'));
 });

ou:

 $(".offer").on("click", function () { 
       var $checkbox = $(this).find(':checkbox');
       $checkbox.attr('checked', !$checkbox.is(':checked'));
 });

ou, en manipulant directement la propriété "vérifiée" du DOM (c'est-à-dire en n'utilisant pas attr() à extraction l'état actuel de la case à cocher cliquée):

 $(".offer").on("click", function () { 
       var $checkbox = $(this).find(':checkbox');
       $checkbox.attr('checked', !$checkbox[0].checked);
 });

...etc.

Remarque: depuis jQuery 1.6, les cases à cocher doivent être définies avec prop pas attr:

 $(".offer").on("click", function () { 
       var $checkbox = $(this).find(':checkbox');
       $checkbox.prop('checked', !$checkbox[0].checked);
 });
214
karim79

Une autre approche serait d’étendre jquery comme ceci:

$.fn.toggleCheckbox = function() {
    this.attr('checked', !this.attr('checked'));
}

Puis appelez:

$('.offer').find(':checkbox').toggleCheckbox();
27
Justin Tanner

Attention: utiliser attr () ou prop () pour changer l'état d'une case à cocher ne le fait pas déclencher le événement de changement = dans la plupart des navigateurs avec lesquels j'ai testé. L'état coché changera mais aucun événement ne bouillonnera. Vous devez déclencher l'événement change manuellement après avoir défini l'attribut vérifié. Certains de mes gestionnaires d’événements surveillaient l’état des cases à cocher et ils fonctionnaient correctement avec des clics d’utilisateur directs. Toutefois, la définition par programme de l'état vérifié ne déclenche pas de manière cohérente l'événement change.

jQuery 1.6

$('.offer').bind('click', function(){ 
    var $checkbox = $(this).find(':checkbox');
    $checkbox[0].checked = !$checkbox[0].checked;
    $checkbox.trigger('change'); //<- Works in IE6 - IE9, Chrome, Firefox
});
11
Tim Santeford

Vous pouvez utiliser la fonction toggle :

$('.offer').toggle(function() {
    $(this).find(':checkbox').attr('checked', true);
}, function() {
    $(this).find(':checkbox').attr('checked', false);
});
7
dcharles

Pourquoi pas en une seule ligne?

$('.offer').click(function(){
    $(this).find(':checkbox').attr('checked', !$(this).find(':checkbox').attr('checked'));
});
2
Thomas Seres

J'ai une seule case à cocher nommée chkDueDate et un objet HTML avec un événement de clic, comme suit:

$('#chkDueDate').attr('checked', !$('#chkDueDate').is(':checked'));

En cliquant sur l'objet HTML (dans ce cas, un <span>) bascule la propriété cochée de la case à cocher.

1
Ross Mehlman

jQuery: meilleure manière, déléguez les actions à jQuery (jQuery = jQuery).

$( "input[type='checkbox']" ).prop( "checked", function( i, val ) {
    return !val;
});
1
miosser
<label>
    <input
        type="checkbox"
        onclick="$('input[type=checkbox]').attr('checked', $(this).is(':checked'));"
    />
    Check all
</label>
0
dobs
$('.offer').click(function() { 
    $(':checkbox', this).each(function() {
        this.checked = !this.checked;
    });
});
0
Alex Barrett

essayez de changer ceci:

$(this).find(':checkbox').attr('checked', true );

pour ça:

$(this).find(':checkbox').attr('checked', 'checked');

Pas sûr à 100% si cela va le faire, mais il me semble me rappeler avoir eu un problème similaire. Bonne chance!

0
inkedmn

La solution la plus simple

$('.offer').click(function(){
    var cc = $(this).attr('checked') == undefined  ? false : true;
    $(this).find(':checkbox').attr('checked',cc);
});
0
keithics
$('.offer').click(function(){ 
    if ($(this).find(':checkbox').is(':checked'))
    {
        $(this).find(':checkbox').attr('checked', false); 
    }else{
        $(this).find(':checkbox').attr('checked', true); 
    }
});
0
lod3n

Dans JQuery, je ne pense pas que click () accepte deux fonctions pour basculer. Vous devez utiliser la fonction toggle () pour cela: http://docs.jquery.com/Events/toggle

0
Kai

Une autre solution alternative pour basculer la valeur de la case à cocher:

<div id="parent">
    <img src="" class="avatar" />
    <input type="checkbox" name="" />
</div>


$("img.avatar").click(function(){

    var op = !$(this).parent().find(':checkbox').attr('checked');
    $(this).parent().find(':checkbox').attr('checked', op);

});
0
Saeed
    $('controlCheckBox').click(function(){
    var temp = $(this).prop('checked');
    $('controlledCheckBoxes').prop('checked', temp);
});
0
mahmoh