suchen

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

黄舟
黄舟Original
2017-12-04 10:48:371724Durchsuche

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>

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!

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 ein Suchfeld ähnlich wie BaiduNächster Artikel：jquery implementiert ein Suchfeld ähnlich wie Baidu

In Verbindung stehende Artikel

Mehr sehen