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

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

WBOY

Freigeben： 2016-05-16 15:21:39

Original

1231 Leute haben es durchsucht

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>

Nach dem Login kopieren

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

Alles auswählen:

Code kopieren Der Code lautet wie folgt:

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>

Nach dem Login kopieren

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>

Nach dem Login kopieren

<!--放一个控制全选的按钮-->
全选<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>

Nach dem Login kopieren

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

Nach dem Login kopieren

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值

Nach dem Login kopieren

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>

Nach dem Login kopieren

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>

Nach dem Login kopieren

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