wake-up-neo.com

jQuery Show-Hide DIV basierend auf Checkbox Value

Mit AJAX Ich fülle einen DIV mit einer Reihe von Kontrollkästchen (jedes mit einer eigenen eindeutigen ID). Die IDs lauten "projectID1", "projectID2", "projectID3" und so weiter ... I haben allen Checkboxen eine Klasse von "pChk" gegeben.

Mein Endziel ist es, den DIV mit dem Submit Button anzuzeigen, wenn eines der Kontrollkästchen aktiviert ist. Der DIV mit der Sendeschaltfläche wird nur ausgeblendet, wenn alle Kontrollkästchen deaktiviert sind.

Der Code, den ich unten erstellt habe, zeigt/verbirgt jedoch den Submit Button DIV für jede Checkbox-Instanz. Mit anderen Worten, wenn ich drei Kontrollkästchen aktiviert und eines deaktiviert habe, wird der Submit-Button DIV ausgeblendet.

Ihre kompetente Beratung ist mehr als willkommen!

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

Solange dies alt ist, wenn jemand darauf noch einmal stößt (über die Suche). Die richtige Antwort ab jQuery 1.7 lautet nun:

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

Ich benutze jQuery Prop

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

Das liegt daran, dass Sie nur das aktuelle Kontrollkästchen aktivieren.

Ändern Sie es zu

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

um zu überprüfen, ob eines der Kontrollkästchen aktiviert ist ( viele Checks in dieser Zeile .. ).

referenz: http://api.jquery.com/checked-selector/

11
Gabriele Petrioli

ebdiv ist gesetzt style="display:none;"

es ist Werke zeigen und verstecken

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

});
5
Vaishu

Ein Tipp für alle Leute, die ein rotes, grünes Plugin verwenden. Aufgrund dieses Plugins funktionieren die obigen Antworten nicht!

In diesem Fall benutze onchange = "do_your_stuff ();" auf dem Etikett, zum Beispiel: Ihre Checkbox hier

Der Grund, warum es nicht funktioniert, ist, dass diese Abfrage viele Objekte um das reale Kontrollkästchen erstellt, sodass Sie nicht sehen können, ob es geändert wurde oder nicht.

Aber wenn jemand direkt auf das Kontrollkästchen klickt, funktioniert das nicht: '(

2
Marcelo Agimóvel

Sie könnten erwägen, die :checked Selector , bereitgestellt von jQuery. Etwas wie das:

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

Versuche dies

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

Es wird also geprüft, ob mindestens ein Kontrollkästchen aktiviert ist oder nicht.

0
UI Dev