Heim > Web-Frontend > js-Tutorial > Hauptteil

JQuery-Ein-Klick-Methode zur Steuerung der Auswahl, Umkehrung und Abwahl von Kontrollkästchen

一个新手
Freigeben: 2017-10-17 09:44:00
Original
1802 Leute haben es durchsucht

Die Methode attr() von jquery kann beim Abrufen des überprüften Tags Probleme verursachen. Daher wird die Methode prop() verwendet.

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

Wenn es einen besseren Weg gibt, geben Sie ihn bitte!!

//全选$('#allChecked').change(function(){
     $('#box').children(':checkbox').prop('checked',$(this).is(':checked')?true:false);
});
Nach dem Login kopieren
//反选$('#invertChecked').change(function(){  
        if($(this).is(':checked')){
     $('#box').children(':checkbox').each(function(){
       $(this).prop('checked',$(this).is(':checked')?false:true);
     });
  }
});
Nach dem Login kopieren
//一键控制全选、反选、全不选
$('#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也取消选中
  }
    
});
Nach dem Login kopieren
<div align="center">
          
      <div 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">火龙果
      </div>    
              
      <br>
              
      <input type="checkbox" id="allChecked">全选
      <input type="checkbox" id="invertChecked">反选
      <input type="checkbox" id="orChecked">全选/反选/全不选
              
  </div>
Nach dem Login kopieren

Wenn es einen besseren Weg gibt, hoffe ich, dass Sie ihn geben! !

Das obige ist der detaillierte Inhalt vonJQuery-Ein-Klick-Methode zur Steuerung der Auswahl, Umkehrung und Abwahl von Kontrollkästchen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!