jquery steuert die Auswahl von Kontrollkästchen, die umgekehrte Auswahl oder keine Auswahl mit einem Klick

Dieser Artikel stellt hauptsächlich die Ein-Klick-Steuerung von jquery zur Auswahl, zur umgekehrten Auswahl oder zur fehlenden Auswahl vor. Ich hoffe, dass er jedem helfen kann.

Die attr()-Methode von jquery hat Probleme beim Abrufen des überprüften Werts des Tags, daher wird die prop()-Methode verwendet.

Hml-Kontrollkästchen fügt keinen Namen hinzu, es wird nur p-Verschachtelung verwendet.

Wenn es einen besseren Weg gibt, geben Sie mir bitte einen Rat!!

//全选
$('#allChecked').change(function(){
   $('#box').children(':checkbox').prop('checked',$(this).is(':checked')?true:false);
});

//反选
$('#invertChecked').change(function(){
 if($(this).is(':checked')){
   $('#box').children(':checkbox').each(function(){
    $(this).prop('checked',$(this).is(':checked')?false:true);
   });
 }
});

//一键控制全选、反选、全不选
$('#orChecked').change(function(){
 if($(this).is(':checked')){
   var box = $('#box').children(':checkbox');
   if(box.length==box.filter(':not(:checked)').length){  // 复选框长度和没选中的个数一样 -> 全选 , .not(':checked').length 也可以。
   $('#box').children(':checkbox').prop('checked',true);
 }else{   // 如果有选中个数，-> 反选 
   $('#box').children(':checkbox').each(function(){   
    $(this).prop('checked',$(this).is(':checked')?false:true);
   });
 }else{
   $('#box').children(':checkbox').prop('checked',false);  // 如控制键取消选中，剩余的checkbox也取消选中
 }
  
});

 <p align="center">
     
   <p id="box">
     <input type="checkbox" value="1">西瓜
     <input type="checkbox" value="2">芒果
     <input type="checkbox" value="3">橙
     <input type="checkbox" value="4">山竹
     <input type="checkbox" value="5">草莓
     <input type="checkbox" value="6">火龙果
   </p>  
       
   <br>
       
   <input type="checkbox" id="allChecked">全选
   <input type="checkbox" id="invertChecked">反选
   <input type="checkbox" id="orChecked">全选/反选/全不选
       
 </p>

Verwandte Empfehlungen:

Die CheckBox der Vorlagenspalte im asp.net GridView-Steuerelement wählt alle aus , kehrt die Auswahl um, Abbrechen

JQuery-basierte Analyse von Kontrollkästchen-Auswahlproblemen

Kontrollkästchen-Auswahl und Auswahl umkehren/abbrechen

Das obige ist der detaillierte Inhalt vonjquery steuert die Auswahl von Kontrollkästchen, die umgekehrte Auswahl oder keine Auswahl mit einem Klick. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!