Heim > Artikel > Web-Frontend > jQuery ermittelt, ob das Kontrollkästchen aktiviert ist, wählt alle aus und kehrt den Auswahlimplementierungscode um

jQuery ermittelt, ob das Kontrollkästchen aktiviert ist, wählt alle aus und kehrt den Auswahlimplementierungscode um

高洛峰Original: 2017-02-06 13:20:211181Durchsuche

jQuery ermittelt, ob das Kontrollkästchen (Kontrollkästchen) aktiviert ist:
if($("#id").attr("checked")==true)

jQuery implementiert das Kontrollkästchen (Kontrollkästchen) Ausgewählter, vollständig ausgewählter/invers ausgewählter Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery如何判断checkbox（复选框）是否被选中以及全选、反选</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
<!--
$("document").ready(function(){
 $("#all").click(function(){   
  if(this.checked){   
   $("input[name=&#39;checkbox&#39;]").each(function(){this.checked=true;});
   $("#btn1").attr("value","反选");   
  }else{   
   $("input[name=&#39;checkbox&#39;]").each(function(){this.checked=false;});   
   $("#btn1").attr("value","全选"); 
  }   
 });

 $("#btn1").click(function(){
  $("[name=&#39;checkbox&#39;]").attr("checked",&#39;true&#39;);//全选
 });

 $("#btn2").click(function(){
  $("[name=&#39;checkbox&#39;]").removeAttr("checked");//取消全选
 });

 $("#btn3").click(function(){
  $("[name=&#39;checkbox&#39;]:even").attr("checked",&#39;true&#39;);//选中所有奇数
 });

 $("#btn4").click(function(){
  $("[name=&#39;checkbox&#39;]").each(function(){
   if($(this).attr("checked"))
   {
    $(this).removeAttr("checked");
   }else{
    $(this).attr("checked",&#39;true&#39;);
   }
  });
 });

 $("#btn5").click(function(){
  var str="";
  //$("input:checkbox[name=&#39;checkbox&#39;]:checked").each(function(){//可以
  $("[name=&#39;checkbox&#39;][checked]").each(function(){
   str+=$(this).val()+"\r\n";
  });
  alert(str);
 });
});
//-->
</script>
</head>
<body>
    <form name="form1" method="post" action="">
     <input type="checkbox" id="all" name="all">
        <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="获得选中的所有值">
        <br />
        <input type="checkbox" name="checkbox" value="checkbox1">checkbox1
        <input type="checkbox" name="checkbox" value="checkbox2">checkbox2
        <input type="checkbox" name="checkbox" value="checkbox3">checkbox3
        <input type="checkbox" name="checkbox" value="checkbox4">checkbox4
        <input type="checkbox" name="checkbox" value="checkbox5">checkbox5
        <input type="checkbox" name="checkbox" value="checkbox6">checkbox6
        <input type="checkbox" name="checkbox" value="checkbox7">checkbox7
        <input type="checkbox" name="checkbox" value="checkbox8">checkbox8
    </form>
</body>
</html>

Weitere Informationen zur jQuery-Beurteilung des Kontrollkästchens (Kontrollkästchen), ob es ausgewählt ist, und Artikel zu allen ausgewählten, invers ausgewählten Implementierungscodes finden Sie hier die chinesische PHP-Website!

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：jQuery implementiert die Auswahl aller Kontrollkästchen/die Auswahl aller/die umgekehrte Auswahl und ruft den ausgewählten Wert abNächster Artikel：jQuery implementiert die Auswahl aller Kontrollkästchen/die Auswahl aller/die umgekehrte Auswahl und ruft den ausgewählten Wert ab

In Verbindung stehende Artikel

Mehr sehen