javascript實現(xiàn)checkbox復選框實例代碼

更新時間：2016年01月10日 11:23:13 投稿：lijiao

這篇文章主要為大家介紹了javascript實現(xiàn)checkbox復選框實例代碼，對checkbox復選框進行美化，感興趣的小伙伴們可以參考一下

本文實例介紹了javascript實現(xiàn)checkbox復選框實例代碼以及對checkbox復選框進行美化操作，分享給大家供大家參考，具體內容如下

1、checkbox復選框進行美化操作

復選框默認外表的美觀度差強人意，能夠滿足美觀度要求不高的頁面，但是如果對于頁面要求較為精致，那可能就過于勉強了，下面就一段對復選框進行美化的代碼實例，希望能夠給大家?guī)硪欢ǖ膸椭?br /> 代碼實例如下：

<!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>

2、checkbox復選框全選和取消全選實例代碼
關于復選框的全選和不全選是非常常見的操作，本章節(jié)分享一段代碼實例，能夠實現(xiàn)多種選中和取消選中功能。
代碼實例如下:

<!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="選中所有奇數(shù)">
  <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>

以上就是關于checkbox復選框的全部內容，希望對大家的學習有所幫助。

您可能感興趣的文章: