Heim > Web-Frontend > js-Tutorial > Implementieren Sie Funktionen wie das Auswählen aller Kontrollkästchen, das Umkehren von Auswahlen und das Deaktivieren aller Kontrollkästchen basierend auf JQuery

Implementieren Sie Funktionen wie das Auswählen aller Kontrollkästchen, das Umkehren von Auswahlen und das Deaktivieren aller Kontrollkästchen basierend auf JQuery

高洛峰
Freigeben: 2017-02-06 13:10:22
Original
946 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

werden jeweils implementiert. Der vollständige Code der relevanten Funktionen lautet wie folgt:

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

Beachten Sie, dass das JQuery-Paket vor der Verwendung von JQuery eingeführt werden muss!

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

Weitere verwandte Artikel zum Implementieren der Kontrollkästchenauswahl, der umgekehrten Auswahl und der Deaktivierung aller Elemente basierend auf JQuery finden Sie auf der chinesischen PHP-Website!

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