Ich versuche, alle Kontrollkästchen mit jquery zu aktivieren/deaktivieren. Durch Aktivieren/Deaktivieren des übergeordneten Kontrollkästchens werden nun alle untergeordneten Kontrollkästchen aktiviert/deaktiviert, und der Text des übergeordneten Kontrollkästchens wird in "Aktivieren/Deaktivieren" geändert.
Jetzt möchte ich das übergeordnete Kontrollkästchen durch einen Eingabeknopf ersetzen und den Text auch auf dem Knopf ändern, um alles zu markieren/zu löschen. Dies ist der Code, kann jemand bitte den Code optimieren ...
$( function() {
$( '.checkAll' ).live( 'change', function() {
$( '.cb-element' ).attr( 'checked', $( this ).is( ':checked' ) ? 'checked' : '' );
$( this ).next().text( $( this ).is( ':checked' ) ? 'Uncheck All' : 'Check All' );
});
$( '.cb-element' ).live( 'change', function() {
$( '.cb-element' ).length == $( '.cb-element:checked' ).length ? $( '.checkAll' ).attr( 'checked', 'checked' ).next().text( 'Uncheck All' ) : $( '.checkAll' ).attr( 'checked', '' ).next().text( 'Check All' );
});
});
<input type="checkbox" class="checkAll" /> <b>Check All</b>
<input type="checkbox" class="cb-element" /> Checkbox 1
<input type="checkbox" class="cb-element" /> Checkbox 2
<input type="checkbox" class="cb-element" /> Checkbox 3
Probier diese :
$(document).ready(function(){
$('.check:button').toggle(function(){
$('input:checkbox').attr('checked','checked');
$(this).val('uncheck all');
},function(){
$('input:checkbox').removeAttr('checked');
$(this).val('check all');
})
})
Dies ist der kürzeste Weg, den ich gefunden habe (benötigt jQuery1.6 +)
HTML:
<input type="checkbox" id="checkAll"/>
JS:
$("#checkAll").change(function () {
$("input:checkbox").prop('checked', $(this).prop("checked"));
});
Ich verwende .prop, da .attr nicht für Kontrollkästchen in jQuery 1.6+ funktioniert, es sei denn, Sie haben Ihrem Eingabetag explizit ein geprüftes Attribut hinzugefügt.
Beispiel-
$("#checkAll").change(function () {
$("input:checkbox").prop('checked', $(this).prop("checked"));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form action="#">
<p><label><input type="checkbox" id="checkAll"/> Check all</label></p>
<fieldset>
<legend>Loads of checkboxes</legend>
<p><label><input type="checkbox" /> Option 1</label></p>
<p><label><input type="checkbox" /> Option 2</label></p>
<p><label><input type="checkbox" /> Option 3</label></p>
<p><label><input type="checkbox" /> Option 4</label></p>
</fieldset>
</form>
Probier diese:
[~ # ~] html [~ # ~]
<input type="checkbox" name="all" id="checkall" />
JavaScript
$('#checkall:checkbox').change(function () {
if($(this).attr("checked")) $('input:checkbox').attr('checked','checked');
else $('input:checkbox').removeAttr('checked');
});
HTML
<input type="checkbox" name="select_all" id="select_all" class="checkAll" />
Javascript
$('.checkAll').click(function(){
if($(this).attr('checked')){
$('input:checkbox').attr('checked',true);
}
else{
$('input:checkbox').attr('checked',false);
}
});
Versuche dies:
$('.checkAll').on('click', function(e) {
$('.cb-element').prop('checked', $(e.target).prop('checked'));
});
e
ist das Ereignis, das generiert wird, wenn Sie click
und e.target
ist das angeklickte Element (.checkAll
), Sie müssen also nur die Eigenschaft checked
von Elementen mit der Klasse .cb-element
wie das eines Elements mit der Klasse .checkAll`.
PS: Entschuldigen Sie mein schlechtes Englisch!
Lösung zum Umschalten von Kontrollkästchen mithilfe einer Schaltfläche, kompatibel mit jQuery 1.9+, wobei toogle-event ist nicht mehr verfügbar :
$('.check:button').click(function(){
var checked = !$(this).data('checked');
$('input:checkbox').prop('checked', checked);
$(this).val(checked ? 'uncheck all' : 'check all' )
$(this).data('checked', checked);
});
Ich stimme Richard Garsides kurzer Antwort zu, aber anstatt prop()
in $(this).prop("checked")
zu verwenden, können Sie die native Eigenschaft JS checked
von checkbox wie folgt verwenden:
$("#checkAll").change(function () {
$("input:checkbox").prop('checked', this.checked);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form action="#">
<p><label><input type="checkbox" id="checkAll"/> Check all</label></p>
<fieldset>
<legend>Loads of checkboxes</legend>
<p><label><input type="checkbox" /> Option 1</label></p>
<p><label><input type="checkbox" /> Option 2</label></p>
<p><label><input type="checkbox" /> Option 3</label></p>
<p><label><input type="checkbox" /> Option 4</label></p>
</fieldset>
</form>
Beste Lösung hier Check Fiddle
$("#checkAll").change(function () {
$("input:checkbox.cb-element").prop('checked', $(this).prop("checked"));
});
$(".cb-element").change(function () {
_tot = $(".cb-element").length
_tot_checked = $(".cb-element:checked").length;
if(_tot != _tot_checked){
$("#checkAll").prop('checked',false);
}
});
<input type="checkbox" id="checkAll"/> ALL
<br />
<input type="checkbox" class="cb-element" /> Checkbox 1
<input type="checkbox" class="cb-element" /> Checkbox 2
<input type="checkbox" class="cb-element" /> Checkbox 3
Der folgende Code funktioniert, wenn der Benutzer alle Kontrollkästchen aktiviert und das Kontrollkästchen "Alle aktivieren" aktiviert ist. Wenn der Benutzer eines der Kontrollkästchen deaktiviert, wird das Kontrollkästchen "Alle aktivieren" deaktiviert.
$("#checkall").change(function () {
$("input:checkbox").prop('checked', $(this).prop("checked"));
});
$(".cb-element").change(function () {
if($(".cb-element").length==$(".cb-element:checked").length)
$("#checkall").prop('checked', true);
else
$("#checkall").prop('checked', false);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="checkbox" name="all" id="checkall" />Check All</br>
<input type="checkbox" class="cb-element" /> Checkbox 1</br>
<input type="checkbox" class="cb-element" /> Checkbox 2</br>
<input type="checkbox" class="cb-element" /> Checkbox 3
Sie können dies versuchen
$('.checkAll').on('click',function(){
$('.checkboxes').prop('checked',$(this).prop("checked"));
});`
Klasse .checkAll
ist ein Kontrollkästchen, das die Massenaktion steuert
versuche dies
$(".checkAll").click(function() {
if("checkall" === $(this).val()) {
$(".cb-element").attr('checked', true);
$(this).val("uncheckall"); //change button text
}
else if("uncheckall" === $(this).val()) {
$(".cb-element").attr('checked', false);
$(this).val("checkall"); //change button text
}
});
Schamlose Eigenwerbung: dafür gibt es ein jQuery-Plugin .
HTML:
<form action="#" id="myform">
<div><input type="checkbox" id="checkall"> <label for="checkall"> Check all</label></div>
<fieldset id="slaves">
<div><label><input type="checkbox"> Checkbox</label></div>
<div><label><input type="checkbox"> Checkbox</label></div>
<div><label><input type="checkbox"> Checkbox</label></div>
<div><label><input type="checkbox"> Checkbox</label></div>
<div><label><input type="checkbox"> Checkbox</label></div>
</fieldset>
</form>
JS:
$('#checkall').checkAll('#slaves input:checkbox', {
reportTo: function () {
var prefix = this.prop('checked') ? 'un' : '';
this.next().text(prefix + 'check all');
}
});
...und du bist fertig.
Alle mit der Eigenschaft Intermediate mit jQuery aktivieren/deaktivieren
Get Checked Items in Array mit der Methode getSelectedItems ()
Quelle Kontrollkästchen Alle mit unbestimmtem Master-Check auswählen/Auswahl aufheben
[~ # ~] html [~ # ~]
<div class="container">
<div class="card">
<div class="card-header">
<ul class="list-group list-group-flush">
<li class="list-group-item">
<input
class="form-check-input"
type="checkbox"
value="selectAll"
id="masterCheck"
/>
<label class="form-check-label" for="masterCheck">
Select / Unselect All
</label>
</li>
</ul>
</div>
<div class="card-body">
<ul class="list-group list-group-flush" id="list-wrapper">
<li class="list-group-item">
<input
class="form-check-input"
type="checkbox"
value="item1"
id="item1"
/>
<label class="form-check-label" for="item1">
Item 1
</label>
</li>
<li class="list-group-item">
<input
class="form-check-input"
type="checkbox"
value="item2"
id="item2"
/>
<label class="form-check-label" for="item2">
Item 2
</label>
</li>
<li class="list-group-item">
<input
class="form-check-input"
type="checkbox"
value="item3"
id="item3"
/>
<label class="form-check-label" for="item3">
Item 3
</label>
</li>
<li class="list-group-item">
<input
class="form-check-input"
type="checkbox"
value="item4"
id="item4"
/>
<label class="form-check-label" for="item4">
Item 4
</label>
</li>
<li class="list-group-item">
<input
class="form-check-input"
type="checkbox"
value="item5"
id="item5"
/>
<label class="form-check-label" for="item5">
Item 5
</label>
</li>
<li class="list-group-item" id="selected-values"></li>
</ul>
</div>
</div>
</div>
jQuery
$(function() {
// ID selector on Master Checkbox
var masterCheck = $("#masterCheck");
// ID selector on Items Container
var listCheckItems = $("#list-wrapper :checkbox");
// Click Event on Master Check
masterCheck.on("click", function() {
var isMasterChecked = $(this).is(":checked");
listCheckItems.prop("checked", isMasterChecked);
getSelectedItems();
});
// Change Event on each item checkbox
listCheckItems.on("change", function() {
// Total Checkboxes in list
var totalItems = listCheckItems.length;
// Total Checked Checkboxes in list
var checkedItems = listCheckItems.filter(":checked").length;
//If all are checked
if (totalItems == checkedItems) {
masterCheck.prop("indeterminate", false);
masterCheck.prop("checked", true);
}
// Not all but only some are checked
else if (checkedItems > 0 && checkedItems < totalItems) {
masterCheck.prop("indeterminate", true);
}
//If none is checked
else {
masterCheck.prop("indeterminate", false);
masterCheck.prop("checked", false);
}
getSelectedItems();
});
function getSelectedItems() {
var getCheckedValues = [];
getCheckedValues = [];
listCheckItems.filter(":checked").each(function() {
getCheckedValues.Push($(this).val());
});
$("#selected-values").html(JSON.stringify(getCheckedValues));
}
});
versuche dies,
<input type="checkbox" class="checkAll" onclick="$('input[type=checkbox][class=cb-element]').attr('checked',this.checked)">
Sie können this.checked
, um den aktuellen Status des Kontrollkästchens zu überprüfen.
$('.checkAll').change(function(){
var state = this.checked; //checked ? - true else false
state ? $(':checkbox').prop('checked',true) : $(':checkbox').prop('checked',false);
//change text
state ? $(this).next('b').text('Uncheck All') : $(this).next('b').text('Check All')
});
$('.checkAll').change(function(){
var state = this.checked;
state? $(':checkbox').prop('checked',true):$(':checkbox').prop('checked',false);
state? $(this).next('b').text('Uncheck All') :$(this).next('b').text('Check All')
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" class="checkAll" /> <b>Check All</b>
<input type="checkbox" class="cb-element" /> Checkbox 1
<input type="checkbox" class="cb-element" /> Checkbox 2
<input type="checkbox" class="cb-element" /> Checkbox 3
Versuchen Sie den folgenden Code, um alle Kontrollkästchen zu aktivieren/deaktivieren
jQuery(document).ready(function() {
$("#check_uncheck").change(function() {
if ($("#check_uncheck:checked").length) {
$(".checkboxes input:checkbox").prop("checked", true);
} else {
$(".checkboxes input:checkbox").prop("checked", false);
}
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<input type="checkbox" name="check_uncheck" id="check_uncheck" /> Check All/Uncheck All
<br/>
<br/>
<div class="checkboxes">
<input type="checkbox" name="check" id="check" /> Check Box 1
<br/>
<input type="checkbox" name="check" id="check" /> Check Box 2
<br/>
<input type="checkbox" name="check" id="check" /> Check Box 3
<br/>
<input type="checkbox" name="check" id="check" /> Check Box 4
</div>
Versuchen Sie dies Demo Link
Es gibt auch eine andere Möglichkeit, dies zu tun, siehe Beispiel unten. In diesem Beispiel ist das Kontrollkästchen "Alle aktivieren/deaktivieren" aktiviert oder deaktiviert, wenn es aktiviert ist, werden alle aktiviert, und wenn nicht, werden alle deaktiviert
$("#check_uncheck").change(function() {
$(".checkboxes input:checkbox").prop("checked",$(this).is(':checked'));
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<input type="checkbox" name="check_uncheck" id="check_uncheck" /> Check All/Uncheck All
<br/>
<br/>
<div class="checkboxes">
<input type="checkbox" name="check" id="check" /> Check Box 1
<br/>
<input type="checkbox" name="check" id="check" /> Check Box 2
<br/>
<input type="checkbox" name="check" id="check" /> Check Box 3
<br/>
<input type="checkbox" name="check" id="check" /> Check Box 4
</div>
Ich weiß, dass diese Frage alt ist, aber mir ist aufgefallen, dass die meisten Leute ein Kontrollkästchen verwenden. Die akzeptierte Antwort verwendet eine Schaltfläche, kann jedoch nicht mit mehreren Schaltflächen arbeiten (z. B. eine oben auf der Seite eine unten). Hier ist also eine Modifikation, die beides kann.
HTML
<a href="#" class="check-box-machine my-button-style">Check All</a>
jQuery
var ischecked = false;
$(".check-box-machine").click(function(e) {
e.preventDefault();
if (ischecked == false) {
$("input:checkbox").attr("checked","checked");
$(".check-box-machine").html("Uncheck All");
ischecked = true;
} else {
$("input:checkbox").removeAttr("checked");
$(".check-box-machine").html("Check All");
ischecked = false;
}
});
Auf diese Weise können Sie so viele Schaltflächen zum Ändern von Text- und Kontrollkästchenwerten verwenden, wie Sie möchten. Ich habe einen e.preventDefault()
-Aufruf eingefügt, da dadurch verhindert wird, dass die Seite aufgrund des Teils href="#"
Nach oben springt.
$(function () {
$('input#check_all').change(function () {
$("input[name='input_ids[]']").prop('checked', $(this).prop("checked"));
});
});
<script type="text/javascript">
function myFunction(checked,total_boxes){
for ( i=0 ; i < total_boxes ; i++ ){
if (checked){
document.forms[0].checkBox[i].checked=true;
}else{
document.forms[0].checkBox[i].checked=false;
}
}
}
</script>
<body>
<FORM>
<input type="checkbox" name="checkBox" >one<br>
<input type="checkbox" name="checkBox" >two<br>
<input type="checkbox" name="checkBox" >three<br>
<input type="checkbox" name="checkBox" >four<br>
<input type="checkbox" name="checkBox" >five<br>
<input type="checkbox" name="checkBox" >six<br>
<input type="checkbox" name="checkBox" >seven<br>
<input type="checkbox" name="checkBox" >eight<br>
<input type="checkbox" name="checkBox" >nine<br>
<input type="checkbox" name="checkBox" >ten<br> s
<input type=button name="CheckAll" value="Select_All" onClick="myFunction(true,10)">
<input type=button name="UnCheckAll" value="UnCheck All Boxes" onClick="myFunction(false,10)">
</FORM>
</body>
Hier ist ein Link, mit dem Sie das übergeordnete Kontrollkästchen aktivieren und deaktivieren und alle untergeordneten Kontrollkästchen aktivieren und deaktivieren können.
JQuery Check deaktivieren Sie alle Kontrollkästchen mit JQuery mit Demo
$(function () {
$("#select-all").on("click", function () {
var all = $(this);
$('input:checkbox').each(function () {
$(this).prop("checked", all.prop("checked"));
});
});
});
$(document).ready( function() {
// Check All
$('.checkall').click(function () {
$(":checkbox").attr("checked", true);
});
// Uncheck All
$('.uncheckall').click(function () {
$(":checkbox").attr("checked", false);
});
});
fügen Sie dies in Ihren Codeblock ein oder klicken Sie sogar auf Ihre Schaltfläche
$('input:checkbox').attr('checked',false);