Javascript-Implementierung des Checkbox-Kontrollkästchens, Beispielcode

Javascript-Implementierung des Checkbox-Kontrollkästchens, Beispielcode_Javascript-Kenntnisse

WBOY

Freigeben： 2016-05-16 15:20:31

Original

1678 Leute haben es durchsucht

In diesem Artikel wird der Beispielcode von Javascript zur Implementierung des Kontrollkästchens und zur Verschönerung des Kontrollkästchens vorgestellt. Der spezifische Inhalt ist wie folgt

1. Kontrollkästchen für Verschönerungsvorgang

Das Standard-Erscheinungsbild des Kontrollkästchens ist nicht zufriedenstellend und kann Seiten mit geringeren ästhetischen Anforderungen erfüllen. Wenn die Seitenanforderungen jedoch verfeinert sind, ist es möglicherweise zu schwierig, das Kontrollkästchen zu verschönern. Ich hoffe, es kann allen etwas helfen.

Das Codebeispiel lautet wie folgt:

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<title>checkbox复选框</title>
<style type="text/css">
.CheckBoxClass{display:none;}
.CheckBoxLabelClass{
 background:url("mytest/jQuery/UnCheck.png") no-repeat;
 padding-left:30px;
 padding-top:3px;
 margin:5px;
 height:28px;
 width:150px;
 display:block;
}
.CheckBoxLabelClass:hover{text-decoration:underline;}
.LabelSelected{background:url("mytest/jQuery/Check.png") no-repeat;}
</style>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(document).ready(function(){
 $(".CheckBoxClass").change(function(){
  if($(this).is(":checked")){
   $(this).next("label").addClass("LabelSelected");
  }
  else{
   $(this).next("label").removeClass("LabelSelected");
  }
 });
})
</script>
</head>
<body>
<div>
 <input id="CheckBox1" type="checkbox" class="CheckBoxClass"/>
 <label id="Label1" for="CheckBox1" class="CheckBoxLabelClass">脚本之家一</label>
 <input id="CheckBox2" type="checkbox" class="CheckBoxClass"/>
 <label id="Label2" for="CheckBox2" class="CheckBoxLabelClass">脚本之家二</label>
</div>
</body>
</html>

Nach dem Login kopieren

2. Beispielcode zum Aktivieren und Deaktivieren aller Kontrollkästchen Das Aktivieren und Deaktivieren aller Kontrollkästchen ist ein sehr häufiger Vorgang. In diesem Kapitel wird ein Codebeispiel vorgestellt, mit dem mehrere Auswahl- und Abwahlfunktionen implementiert werden können.
Das Codebeispiel lautet wie folgt:

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<title>脚本之家</title>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script> 
<script type="text/javascript">
$("document").ready(function(){
 $("#all").click(function(){  
  if(this.checked)
  {  
   $("input[name='checkbox']").each(function(){this.checked=true;});
   $("#btn1").attr("value","反选");  
  }
  else
  {  
   $("input[name='checkbox']").each(function(){this.checked=false;});  
   $("#btn1").attr("value","全选"); 
  }  
 }); 
 
 $("#btn1").click(function(){
  $("[name='checkbox']").attr("checked",'true');
 })
  
 $("#cancel").click(function(){
  $("[name='checkbox']").removeAttr("checked");
 })
  
 $("#jishu").click(function(){
  $("[name='checkbox']:even").attr("checked",'true');
 })
  
 $("#fanxuan").click(function(){
  $("[name='checkbox']").each(function(){
   if($(this).attr("checked"))
   {
    $(this).removeAttr("checked");
   }
   else
   {
    $(this).attr("checked",'true');
   }
  })
 })
 $("#get").click(function(){
  var str="";
  $("[name='checkbox'][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="cancel" value="取消全选">
  <input type="button" id="jishu" value="选中所有奇数">
  <input type="button" id="fanxuan" value="反选">
  <input type="button" id="get" value="获得选中的所有值">
  <br>
  <input type="checkbox" name="checkbox" value="脚本之家一">
  脚本之家一
  <input type="checkbox" name="checkbox" value="脚本之家二">
  脚本之家二
  <input type="checkbox" name="checkbox" value="脚本之家三">
  脚本之家三
  <input type="checkbox" name="checkbox" value="脚本之家四">
  脚本之家四
  <input type="checkbox" name="checkbox" value="脚本之家五">
  脚本之家五
  <input type="checkbox" name="checkbox" value="脚本之家六">
  脚本之家六
  <input type="checkbox" name="checkbox" value="脚本之家七">
  脚本之家七
  <input type="checkbox" name="checkbox" value="脚本之家八">
  脚本之家八
 </form>
</body>
</html>

Nach dem Login kopieren

Das Obige dreht sich alles um das Kontrollkästchen. Ich hoffe, es wird für das Lernen aller hilfreich sein.