Heim > Artikel > Web-Frontend > So implementieren Sie alle Kontrollkästchen bzw. deaktivieren alle Kontrollkästchen mithilfe von js- und jQuery_javascript-Kenntnissen

So implementieren Sie alle Kontrollkästchen bzw. deaktivieren alle Kontrollkästchen mithilfe von js- und jQuery_javascript-Kenntnissen

WBOYOriginal: 2016-05-16 15:21:391185Durchsuche

Das Beispiel in diesem Artikel beschreibt die Methode zum Aktivieren/Deaktivieren aller Kontrollkästchen mithilfe von js und jQuery. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:

Sehen wir uns zunächst an, wie Sie mithilfe von JavaScript alle Kontrollkästchen aktivieren bzw. deaktivieren. Dies sollte eine praktischere Front-End-Technik sein. Oftmals müssen wir auf ein Kontrollkästchen klicken und dann automatisch alle Kontrollkästchen aktivieren, beispielsweise in Sina Mailbox oder im Hintergrund einiger CMS-Systeme, nachdem wir diesen JS-Effekt verwendet haben Das Bedienerlebnis wird erheblich verbessert. Wie wird diese Funktion implementiert? Machen Sie sich keine Sorgen, folgen Sie mir Schritt für Schritt, um es zu erreichen.

Beenden wir die Liste zunächst mit Kontrollkästchen, bevor wir alle auswählen oder abwählen. Der Status sieht folgendermaßen aus:

<input type=checkbox name=chk>
<input type=checkbox name=chk>
<input type=checkbox name=chk>
<input type=checkbox name=chk>
<input type=checkbox name=chk>
<input type=checkbox name=chk>

Dann platzieren wir ein Kontrollkästchen zur Steuerung des Kontrollkästchens neben der Liste:

Alles auswählen:

Code kopieren Der Code lautet wie folgt:

2baca6d56fc02a8fb11be7c7e3a616d8

Das Folgende ist der JS-Code, der nach dem Klicken auf das gesamte Kontrollkästchen ausgeführt werden soll. Verwenden Sie JS, um alle Kontrollkästchen zu durchlaufen und den Status des Kontrollkästchens zu ändern:

<script language="javascript">
 function sel(a){
 o=document.getElementsByName(a)
 for(i=0;i<o.length;i++)
 o[i].checked=event.srcElement.checked
 }
</script>

Es gibt auch eine Funktion zum Implementieren der JS-Auswahl und der umgekehrten Auswahl. Posten Sie einfach den Code und sortieren Sie ihn selbst.

<input type=checkbox name=m>
<input type=checkbox name=m>
<input type=checkbox name=m>

<!--放一个控制全选的按钮-->
全选<input type="checkbox" value="1" onclick="mm(this)">
<script language=javascript>
<!--JS部分-->
function mm(o)
{
  var a = document.getElementsByName("m");
  for (var i=0;i<a.length;i++){
    a[i].checked = o.checked;
  }
}
</script>

Wählen Sie eine der beiden Methoden, beide sind einfacher.

Jetzt stellen wir die jQuery-Methode vor, um alle Kontrollkästchen zu aktivieren/deaktivieren. Obwohl es mit JavaScript einfach zu implementieren ist, ist der Code sehr mühsam.

Lassen Sie mich nun die spezifische Operationsmethode bei der Verwendung von jQuery vorstellen.

jQuery.attr Ruft den Attributwert des Objekts ab bzw. legt ihn fest, z. B.:

$("input[name='chk_list']").attr("checked"); //读取所有name为'chk_list'对象的状态（是否选中）
$("input[name='chk_list']").attr("checked",true); //设置所有name为'chk_list'对象的checked为true

Ein weiteres Beispiel:

$("#img_1").attr("src","test.jpg"); //设置ID为img_1的<img>src的值为'test.jpg'
$("#img_1").attr("src"); //读取ID为img_1的<img>src值

Beispiel 1:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
 <meta charset="utf-8">
<script src="jquery-1.7.2.min.js"></script>
<script>
 $(document).ready(function(){
 //是否选择进行判断
 $(".btn").click(function(){
  if ($("input:checkbox:checked").length == 0)
  {
  alert('你未选择爱好');
  }
 });
 //进行反选
  $(".btn1").click(function(){
  $("input[type=checkbox]").each(function(){
  if ($(this).attr("checked"))
  {
   $(this).attr("checked",false);
  }else{
   $(this).attr("checked",true);
  }
  });
  });
  });
 </script>
 </head>
<body>
爱好：
<input type="checkbox" name="fav[]" value="read">阅读
<input type="checkbox" name="fav[]" value="music">音乐
<input type="checkbox" name="fav[]" value="sport">体育<br />
<input type="button" name="btn" class="btn" value="提交">
<input type="button" name="btn1" class="btn1" value="反选">
</body>
</html>

Beispiel 2:

<script src="jquery-1.3.2.min.js"></script>
<input type="checkbox" name="checkbox_name[]" id="checkbox_name_1″ />1<br /> <input type="checkbox" name="checkbox_name[]" id="checkbox_name_2″ />2<br />
<input type="checkbox" name="checkbox_name[]" id="checkbox_name_3″ />3<br />
<input type="checkbox" name="checkbox_name[]" id="checkbox_name_4″ />4<br />
<input type="checkbox" name="checkedAll" id="checkedAll"/>全选/取消全选
<script type="text/javascript">
<!--
$(function() {
$("#checkedAll").click(function() {
if ($(this).attr("checked") == true) { // 全选
$("input[name='checkbox_name[]']").each(function() {
$(this).attr("checked", true);
});
} else { // 取消全选
$("input[name='checkbox_name[]']").each(function() {
$(this).attr("checked", false);
});
}
});
});
// -->
</script>

Ich hoffe, dass dieser Artikel für alle hilfreich ist, die sich mit der JavaScript-Programmierung befassen.

Stellungnahme：

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

Vorheriger Artikel：JavaScript implementiert einfache Tab-Switching_Javascript-FähigkeitenNächster Artikel：JavaScript implementiert einfache Tab-Switching_Javascript-Fähigkeiten

In Verbindung stehende Artikel

Mehr sehen