javascript实现checkbox复选框实例代码

前端技术 2023/09/01 JavaScript

本文实例介绍了javascript实现checkbox复选框实例代码以及对checkbox复选框进行美化操作，分享给大家供大家参考，具体内容如下

1、checkbox复选框进行美化操作

复选框默认外表的美观度差强人意，能够满足美观度要求不高的页面，但是如果对于页面要求较为精致，那可能就过于勉强了，下面就一段对复选框进行美化的代码实例，希望能够给大家带来一定的帮助。
代码实例如下：

<!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\">phpstudy一</label>
 <input id=\"CheckBox2\" type=\"checkbox\" class=\"CheckBoxClass\"/>
 <label id=\"Label2\" for=\"CheckBox2\" class=\"CheckBoxLabelClass\">phpstudy二</label>
</div>
</body>
</html>

2、checkbox复选框全选和取消全选实例代码
关于复选框的全选和不全选是非常常见的操作，本章节分享一段代码实例，能够实现多种选中和取消选中功能。
代码实例如下:

<!DOCTYPE html>
<html>
<head>
<meta charset=\" utf-8\">
<title>phpstudy</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=\"phpstudy一\">
  phpstudy一
  <input type=\"checkbox\" name=\"checkbox\" value=\"phpstudy二\">
  phpstudy二
  <input type=\"checkbox\" name=\"checkbox\" value=\"phpstudy三\">
  phpstudy三
  <input type=\"checkbox\" name=\"checkbox\" value=\"phpstudy四\">
  phpstudy四
  <input type=\"checkbox\" name=\"checkbox\" value=\"phpstudy五\">
  phpstudy五
  <input type=\"checkbox\" name=\"checkbox\" value=\"phpstudy六\">
  phpstudy六
  <input type=\"checkbox\" name=\"checkbox\" value=\"phpstudy七\">
  phpstudy七
  <input type=\"checkbox\" name=\"checkbox\" value=\"phpstudy八\">
  phpstudy八
 </form>
</body>
</html>

以上就是关于checkbox复选框的全部内容，希望对大家的学习有所帮助。

本文地址：https://www.stayed.cn/item/2669

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案