web-dev-qa-db-fra.com

jQuery Show-Hide DIV basé sur la valeur de la case à cocher

En utilisant AJAX je remplis un DIV avec un tas de cases à cocher (chacune avec son propre ID unique). Les ID sont "projectID1", "projectID2", "projectID3" et ainsi de suite ... I ont donné à toutes les cases à cocher une classe de "pChk".

Mon objectif final est de montrer la DIV contenant le bouton Soumettre si l'une des cases à cocher est cochée. La seule fois où le DIV contenant le bouton Soumettre est masqué, c'est que toutes les cases sont décochées.

Cependant, le code que j'ai trouvé ci-dessous montre/masque le DIV du bouton de soumission pour chaque instance de case à cocher. En d'autres termes, si j'ai trois cases à cocher cochées et que je décoche l'une d'elles, le bouton Submit DIV est masqué.

Vos conseils d'experts sont plus que bienvenus!

function checkUncheck() { 
    $('.pChk').click(function() {
        if (this.checked) {
            $("#ProjectListButton").show();
        } else {
            $("#ProjectListButton").hide();
        }
    }); 
}
jquerycheckboxshow-hide
23
mickormick

Bien que cela soit ancien si quelqu'un le retrouve (via la recherche). La bonne réponse à partir de jQuery 1.7 est maintenant:

$('.pChk').click(function() {
    if( $(this).is(':checked')) {
        $("#ProjectListButton").show();
    } else {
        $("#ProjectListButton").hide();
    }
});
56
raymosley

J'utilise l'accessoire jQuery

$('#yourCheckbox').change(function(){
  if($(this).prop("checked")) {
    $('#showDiv').show();
  } else {
    $('#hideDiv').hide();
  }
});
15
Cybercarnage ｼ

C'est parce que vous ne cochez que la case actuelle.

Changez-le en

function checkUncheck() { 
    $('.pChk').click(function() {
        if ( $('.pChk:checked').length > 0) {
            $("#ProjectListButton").show();
        } else {
            $("#ProjectListButton").hide();
        }
    }); 
}

pour vérifier si l'une des cases est cochée ( beaucoup de vérifications dans cette ligne .. ).

référence: http://api.jquery.com/checked-selector/

11
Gabriele Petrioli

ebdiv est défini style="display:none;"

c'est fonctionne montrer et cacher

$(document).ready(function(){
    $("#eb").click(function(){
        $("#ebdiv").toggle();
    });

});
5
Vaishu

Un conseil à toutes les personnes qui utilisent un plugin plat rouge, plat vert, à cause de ce plugin, les réponses ci-dessus ne fonctionneront pas!

Dans ce cas, utilisez onchange = "do_your_stuff ();" sur l'étiquette, par exemple: votre case à cocher ici

La raison pour laquelle cela ne fonctionne pas est que ce Jquery crée beaucoup d'objets autour de la vraie case à cocher, donc vous ne pouvez pas voir si elle a changé ou non.

Mais si quelqu'un clique directement sur la case, cela ne fonctionnera pas: '(

2
Marcelo Agimóvel

Vous pourriez envisager d'utiliser le :checked selector , fourni par jQuery. Quelque chose comme ça:

$('.pChk').click(function() {
    if( $('.pChk:checked').length > 0 ) {
        $("#ProjectListButton").show();
    } else {
        $("#ProjectListButton").hide();
    }
});
2
Lee

Essaye ça

$('.yourchkboxes').change(function(){
    $('.yourbutton').toggle($('.yourchkboxes:checked').length > 0);
});

Il vérifiera donc si au moins une case est cochée ou non.

0
UI Dev