脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → javascript实现checkbox复选框

javascript实现checkbox复选框实例代码

 更新时间：2016年01月10日 11:23:13   投稿：lijiao  
这篇文章主要为大家介绍了javascript实现checkbox复选框实例代码，对checkbox复选框进行美化，感兴趣的小伙伴们可以参考一下

本文实例介绍了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复选框的全部内容，希望对大家的学习有所帮助。

您可能感兴趣的文章:

相关文章

  • js的es6常用新特性详解

    js的es6常用新特性详解

    ES6（ECMAScript 6,也称为ES2015）是JavaScript的一个重要更新版本,引入了许多新的语言特性和改进,使得JavaScript变得更加现代化、易读、易维护和更适合大型应用程序的开发,ES6的主要变化归纳为：语法糖、新机制、更好的语义、更多的内置对象和方法
    2023-11-11
  • Javascript实现简单二级下拉菜单实例

    Javascript实现简单二级下拉菜单实例

    这篇文章主要介绍Javascript实现二级下拉菜单的具体过程,需要的朋友可以参考下
    2014-06-06
  • 提高 DHTML 页面性能

    提高 DHTML 页面性能

    提高 DHTML 页面性能...
    2006-12-12
  • laydate 显示结束时间不小于开始时间的实例

    laydate 显示结束时间不小于开始时间的实例

    下面小编就为大家带来一篇laydate 显示结束时间不小于开始时间的实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-08-08
  • JavaScript实现字符串与HTML格式相互转换

    JavaScript实现字符串与HTML格式相互转换

    这篇文章主要介绍了JavaScript实现字符串与HTML格式相互转换,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-03-03
  • 微信小程序通过点击事件传参(data-)的操作示例

    微信小程序通过点击事件传参(data-)的操作示例

    微信小程序可以通过直接写 data-index="1" 进行数据的绑定 ,利用 bindtap 点击事件执行函数从而获取到参数信息,本文给大家介绍微信小程序通过点击事件传参(data-)的操作,感兴趣的朋友一起看看吧
    2023-12-12
  • 将字符串转换成gb2312或者utf-8编码的参数(js版)

    将字符串转换成gb2312或者utf-8编码的参数(js版)

    直接在url中传递中文参数时，读到的中文都是乱码，那么我们应该怎么将这些参数转换呢，接下来与大家分享下将字符串转换成utf-8或者gb2312编码的参数的技巧
    2013-04-04
  • js调用本地exe程序的两种方式小结

    js调用本地exe程序的两种方式小结

    这篇文章主要介绍了js调用本地exe程序的两种方式小结，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2022-11-11
  • js中int和string数据类型互相转化实例

    js中int和string数据类型互相转化实例

    在本篇文章里小编给大家分享了关于js中int和string数据类型互相转化实例和代码，需要的朋友们学习下。
    2019-01-01
  • 使用原生JavaScript实现放大镜效果

    使用原生JavaScript实现放大镜效果

    这篇文章主要为大家详细介绍了如何使用原生JavaScript实现放大镜效果（可自由大小适配），文中的示例代码讲解详细，感兴趣的小伙伴可以了解一下
    2023-03-03

最新评论