javascript实现checkbox复选框实例代码


Posted in Javascript onJanuary 10, 2016

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

Javascript 相关文章推荐
js电信网通双线自动选择技巧
Nov 18 Javascript
extjs grid设置某列背景颜色和字体颜色的实现方法
Sep 06 Javascript
如何将一个String和多个String值进行比较思路分析
Apr 22 Javascript
jquery选择符快速提取web表单数据示例
Mar 27 Javascript
javascript检测是否联网的实现代码
Sep 28 Javascript
浅谈JSON和JSONP区别及jQuery的ajax jsonp的使用
Nov 23 Javascript
jquery操作ID带有变量的节点实例
Dec 07 Javascript
jQuery学习笔记之入门
Dec 14 Javascript
JS仿JQuery选择器功能
Mar 08 Javascript
微信小程序日历组件使用方法详解
Dec 29 Javascript
vue中封装axios并实现api接口的统一管理
Dec 25 Vue.js
JavaScript设计模式之原型模式详情
Jun 21 Javascript
基于javascript实现彩票随机数生成(升级版)
Apr 17 #Javascript
分享有关jQuery中animate、slide、fade等动画的连续触发、滞后反复执行的bug
Jan 10 #Javascript
理解Angular数据双向绑定
Jan 10 #Javascript
JavaScript表单验证实例之验证表单项是否为空
Jan 10 #Javascript
JavaScript电子时钟倒计时第二款
Jan 10 #Javascript
基于javascript实现彩票随机数生成(简单版)
Apr 17 #Javascript
Node.js静态文件服务器改进版
Jan 10 #Javascript
You might like
模板引擎Smarty深入浅出介绍
2006/12/06 PHP
php使用PDO方法详解
2014/12/27 PHP
smarty模板引擎从配置文件中获取数据的方法
2015/01/22 PHP
Json_encode防止汉字转义成unicode的方法
2016/02/25 PHP
php readfile下载大文件失败的解决方法
2017/05/22 PHP
解决PhpStorm64不能启动的问题
2020/06/20 PHP
Aster vs Newbee BO3 第三场2.18
2021/03/10 DOTA
在IE下:float属性会影响offsetTop的取值
2006/12/22 Javascript
选择TreeView控件的树状数据节点的JS方法(jquery)
2010/02/06 Javascript
关于使用 jBox 对话框的提交不能弹出问题解决方法
2012/11/07 Javascript
Javascript实现页面跳转的几种方式分享
2013/10/26 Javascript
Javascript四舍五入Math.round()与Math.pow()使用介绍
2013/12/27 Javascript
ExtJs纵坐标值重复问题的解决方法
2014/02/27 Javascript
ExtJS中设置下拉列表框不可编辑的方法
2014/05/07 Javascript
JavaScript eval() 函数介绍及应用示例
2014/07/29 Javascript
灵活的理解JavaScript中的this指向
2016/02/25 Javascript
ReactNative页面跳转Navigator实现的示例代码
2017/08/02 Javascript
浅谈vue的iview列表table render函数设置DOM属性值的方法
2017/09/30 Javascript
解决微信小程序调用moveToLocation失效问题【超简单】
2019/04/12 Javascript
微信小程序 函数防抖 解决重复点击消耗性能问题实现代码
2019/09/12 Javascript
JQuery发送ajax请求时中文乱码问题解决
2019/11/14 jQuery
[05:17]DOTA2誓师:今天我们在这里 明天TI4等我!
2014/03/26 DOTA
[46:20]DOTA2-DPC中国联赛 正赛 PSG.LGD vs LBZS BO3 第二场 1月22日
2021/03/11 DOTA
获取Django项目的全部url方法详解
2017/10/26 Python
Python后台开发Django的教程详解(启动)
2019/04/08 Python
基于Python实现剪切板实时监控方法解析
2019/09/11 Python
python GUI库图形界面开发之PyQt5信号与槽多窗口数据传递详细使用方法与实例
2020/03/08 Python
浅谈python3 构造函数和析构函数
2020/03/12 Python
德国著名廉价网上药店:Shop-Apotheke
2017/07/23 全球购物
法国低价在线宠物商店:bitiba.fr
2020/07/03 全球购物
管理学专业个人求职信范文
2013/12/13 职场文书
群众路线教育实践活动学习笔记
2014/11/05 职场文书
升职感谢信
2015/01/22 职场文书
辞职书格式样本
2015/02/26 职场文书
2015年政风行风工作总结
2015/04/21 职场文书
2016年庆“七一”主题党日活动总结
2016/04/05 职场文书