Heim > Web-Frontend > js-Tutorial > Hauptteil

Implementieren Sie Funktionen wie das Auswählen aller Kontrollkästchen, das Umkehren von Auswahlen und das Aufheben der Auswahl von keinem auf der Grundlage von jquery_jquery

WBOY
Freigeben: 2016-05-16 15:36:26
Original
1196 Leute haben es durchsucht

jquery implementiert Funktionen wie „Alle auswählen“, „Auswahl umkehren“ und „Alle abwählen“. Gehen Sie davon aus, dass die Seite über die folgenden Kontrollkästchen und mehrere zugehörige Schaltflächen verfügt (Alle auswählen, Auswahl umkehren, Auswahl aller aufheben usw.):

<input type="checkbox" name="fruit" value="apple" />苹果 
<input type="checkbox" name="fruit" value="orange" />橘子 
<input type="checkbox" name="fruit" value="banana" />香蕉 
<input type="checkbox" name="fruit" value="grape" />葡萄 
 
<input type="button" id="btn1" value="全选"> 
<input type="button" id="btn2" value="全不选"> 
<input type="button" id="btn3" value="反选"> 
<input type="button" id="btn4" value="选中所有奇数"> 
<input type="button" id="btn5" value="获得选中的所有值"> 
Nach dem Login kopieren

Der vollständige Code zur Implementierung der jeweiligen Funktionen lautet wie folgt:

$(function(){ 
  $('#btn1').click(function(){//全选 
    $("[name='fruit']").attr('checked','true'); 
  }); 
  $('#btn2').click(function(){//全不选 
    $("[name='fruit']").removeAttr('checked'); 
  }); 
  $('#btn3').click(function(){//反选 
    $("[name='fruit']").each(function(){ 
      if($(this).attr('checked')){ 
        $(this).removeAttr('checked'); 
      }else{ 
        $(this).attr('checked','true'); 
      } 
    }) 
  }); 
  $("#btn4").click(function(){//选中所有奇数 
    $("[name='fruit']:even").attr('checked','true'); 
  }) 
  $("#btn5").click(function(){//获取所有选中的选项的值 
    var checkVal=''; 
    $("[name='fruit'][checked]").each(function(){ 
      checkVal+=$(this).val()+','; 
    }) 
    alert(checkVal); 
  }) 
}); 
Nach dem Login kopieren

Beachten Sie, dass Sie das JQuery-Paket importieren müssen, bevor Sie JQuery verwenden!

Das Obige ist der Code, an dessen Kompilierung der Editor hart gearbeitet hat. Ich hoffe, dass er allen helfen kann.

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!