您的位置:365bet体育备用网址器 > 应用 > 上边就一段对复选框进行美化的代码实例,上面

上边就一段对复选框进行美化的代码实例,上面

2019-09-03 00:42

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

javascript实现checkbox复选框实例代码,javascriptcheckbox

本文实例介绍了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">帮客之家一</label>
 <input id="CheckBox2" type="checkbox" class="CheckBoxClass"/>
 <label id="Label2" for="CheckBox2" class="CheckBoxLabelClass">帮客之家二</label>
</div>
</body>
</html>

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

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

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

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

您可能感兴趣的文章:

  • js checkbox(复选框) 使用集锦
  • javascript 设置某DIV区域内的checkbox复选框
  • Js动态添加复选框Checkbox的实例方法
  • Extjs 4.x 得到form CheckBox 复选框的值
  • javascript获取checkbox复选框获取选中的选项
  • js获取checkbox复选框选中的选项实例
  • JS实现CheckBox复选框全选全不选功能

本文实例介绍了javascript实现checkbox复选框实例代码以及对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">脚本之家一</label>
 <input id="CheckBox2" type="checkbox" class="CheckBoxClass"/>
 <label id="Label2" for="CheckBox2" class="CheckBoxLabelClass">脚本之家二</label>
</div>
</body>
</html>

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

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

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

您可能感兴趣的文章:

  • js判断复选框是否选中及选中个数的实现代码
  • js点击文本框弹出可选择的checkbox复选框
  • JS实现CheckBox复选框全选、不选或全不选功能
  • 基于javascript实现checkbox复选框实例代码
  • js与jQuery实现checkbox复选框全选/全不选的方法
  • javascript动态添加checkbox复选框的方法
  • JS获取复选框的值,并传递到后台的实现方法

本文由365bet体育备用网址器发布于应用,转载请注明出处:上边就一段对复选框进行美化的代码实例,上面

关键词: