jQuery Show-Hide DIV basierend auf Checkbox Wert

Question

Mit AJAX bearbeite ich ein DIV mit einer Reihe von Checkboxen (jedes mit seiner eigenen eindeutigen ID). Die IDs sind "projectID1", "projectID2", "projectID3" und so weiter ... Ich habe allen Checkboxen eine Klasse von "pChk" gegeben.

Mein Endziel ist es, das DIV mit der Submit-Schaltfläche anzuzeigen, wenn eines der Kontrollkästchen aktiviert ist. Das einzige Mal, wenn das DIV mit der Submit-Schaltfläche ausgeblendet wird, ist, wenn alle Kontrollkästchen deaktiviert sind.

Der Code, den ich unten entwickelt habe, zeigt/verbirgt jedoch das Submit Button DIV für jede Checkbox-Instanz. Mit anderen Worten, wenn ich drei Checkboxen CHECKED und I UNCHECK eine davon habe, wird der Submit Button DIV ausgeblendet.

Ihr fachkundiger Rat ist mehr als willkommen!

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

Answer 1

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

ändert es zu

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

zu überprüfen, ob eine der Kontrollkästchen aktiviert ist (viele Kontrollen in dieser Linie ..).

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

Answer 2

Sie betrachten könnte die :checked selector, zur Verfügung gestellt von jQuery verwenden. Etwas wie das:

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

Answer 3

Während das alt ist, wenn jemand wieder über diese (über die Suche) kommt. Die richtige Antwort mit jQuery ab 1.7 ist jetzt:

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

Answer 4

ebdiv style="display:none;" gesetzt

es Werke zeigen wird & hide

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

}); 

Answer 5

Ich benutze jQuery prop

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

Answer 6

Try dies

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

So wird es nach mindestens einem Kontrollkästchen überprüft wird überprüft oder nicht.

Answer 7

Ein Tipp an alle Leute, die flat-red, flat-green plugin verwenden, wegen dieses Plugins werden die obigen Antworten nicht funktionieren!

In diesem Fall verwenden Sie onchange = "do_your_stuff();" Auf dem Etikett, zum Beispiel: Ihr Kontrollkästchen hier

Der Grund, warum es nicht funktioniert, ist, dass diese Jquery viele Objekte um das echte Kontrollkästchen erstellt, so dass Sie nicht sehen können, ob es geändert wird oder nicht.

Aber wenn jemand gerade auf Kontrollkästchen klicken, wird nicht funktionieren: '(