jQuery Show-Hide DIV basierend auf Checkbox Value

AJAX ich füllen Sie ein DIV mit einer Reihe von Checkboxen (jedes mit seinen eigenen einzigartigen ID). Die IDs werden "projectID1", "projectID2", "projectID3" und so weiter... ich habe alle Checkboxen einer Klasse von "pChk".

Mein Ziel ist es zu zeigen, das DIV mit der Submit-Schaltfläche, wenn Sie die entsprechenden Kontrollkästchen aktiviert sind. Das einzige mal, das DIV mit der Submit-Schaltfläche anzeigen werden ausgeblendet wird, wenn alle Checkboxen deaktiviert sind.

Aber die Codes die ich mit oben kommen unten zeigt/versteckt den Submit-Button-DIV für jedes checkbox-Instanz. In anderen Worten, wenn ich drei Checkboxen AKTIVIERT und ich DEAKTIVIEREN einer von Ihnen, der Submit-Button-DIV ausgeblendet werden.

Ihre kompetente Beratung ist mehr als willkommen!

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

InformationsquelleAutor der Frage mickormick | 2010-12-14

  1. 51

    Dies ist zwar alt sein, wenn jemand kommt, über diese wieder (über die Suche). Die richtige Antwort mit jQuery 1.7 ab jetzt:

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

    InformationsquelleAutor der Antwort raymosley

  2. 14

    Verwende ich jQuery prop

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

    InformationsquelleAutor der Antwort Cybercarnage ｼ

  3. 11

    Ist, weil Sie nur die überprüfung der aktuellen checkbox.

    Ändern

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

    überprüfen, wenn keine der Checkboxen aktiviert ist (viele Prüfungen in dieser Zeile..).

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

    InformationsquelleAutor der Antwort Gabriele Petrioli

  4. 5

    ebdiv eingestellt ist style="display:none;"

    ist es funktioniert show & ausblenden

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

});

    InformationsquelleAutor der Antwort Vaishu

  5. 2

    Könnten Sie in Erwägung ziehen, die aktiviert - Selektorzur Verfügung gestellt von jQuery. So etwas wie dieses:

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

    InformationsquelleAutor der Antwort Lee

  6. 2

    Einen Tipp an alle Menschen die mit Flachbild-rot, flat-green-plugin, da dieses plugin die Antworten oben nicht arbeiten!

    Verwenden Sie In diesem Fall onchange="do_your_stuff();" auf dem Etikett, zum Beispiel:
    Ihre checkbox hier

    Der Grund, warum es nicht funktioniert, ist, dass das Jquery erstellt eine Menge von Objekten, um die wirklichen checkbox, so können Sie nicht sehen, ob es verändert oder nicht.

    Aber wenn jemand klicken Sie direkt auf das Kontrollkästchen, wird nicht funktionieren :'(

    InformationsquelleAutor der Antwort Marcelo Agimóvel

  7. 0

    Versuchen, diese

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

    Damit es prüft, ob mindestens eine checkbox aktiviert ist oder nicht.

    InformationsquelleAutor der Antwort RIA Dev

Schreibe einen Kommentar