Heim > Web-Frontend > js-Tutorial > Detaillierte Erläuterung der Beispiele für jQuery-Methoden zur Bedienung von CheckBox

Detaillierte Erläuterung der Beispiele für jQuery-Methoden zur Bedienung von CheckBox

黄舟
Freigeben: 2017-12-04 10:48:37
Original
1721 Leute haben es durchsucht

In unserem eigentlichen Entwicklungsprozess, egal ob es sich um HTML oder jQuery handelt, ist es eines der Dinge, die wir lernen müssen. Ich glaube, dass jeder mit CheckBox vertraut ist und es sowohl in HTML als auch in jQuery verwendet wird Deshalb führen wir Sie heute ausführlich in die Methodenbeispiele der jQuery-Bedienung von CheckBox ein!

Beispiele für die Funktionsweise von CheckBox durch jQuery

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">     
<HTML>     
 <HEAD>     
  <TITLE> New document.nbsp;</TITLE>     
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />     
    <SCRIPT LANGUAGE="javascript" src="http://www.cnjquery.com/demo/jquery.js"></script>     
  <SCRIPT LANGUAGE="javascript">     
  <!--     
   $("document.quot;).ready(function(){     
         
    $("#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="";     
    $("[name=&#39;checkbox&#39;][checked]").each(function(){     
     str+=$(this).val()+""r"n";     
   //alert($(this).val());     
    })     
   alert(str);     
    })     
   })     
  //-->     
  </SCRIPT>     
       
 </HEAD>     
    
 <BODY>     
 <form name="form1" method="post" action="">     
   <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>
Nach dem Login kopieren

Zusammenfassung:

In diesem Artikel werden anhand von Beispielen Beispiele für die Funktionsweise von CheckBox durch jQuery vorgestellt Detailliert, meine Freunde haben auch ein gewisses Verständnis dafür, ich hoffe, es wird für Ihre Arbeit hilfreich sein!

Verwandte Empfehlungen:

Jquery-Ein-Klick-Methode zur Steuerung der Auswahl, Umkehrung und Abwahl von Kontrollkästchen

So aktivieren Sie mehrere Werte im Kontrollkästchen in js

Kontrollkästchen implementiert das Klickereignis Inhaltsänderung des Span-Elements auslösen

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der Beispiele für jQuery-Methoden zur Bedienung von CheckBox. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
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