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 相关文章推荐
jQuery 学习第七课 扩展jQuery的功能 插件开发
May 17 Javascript
加速IE的Javascript document输出的方法
Dec 02 Javascript
Jquery代码实现图片轮播效果(一)
Aug 12 Javascript
谈一谈javascript闭包
Jan 28 Javascript
zTree插件下拉树使用入门教程
Apr 11 Javascript
老生常谈遮罩层 滚动条的问题
Apr 29 Javascript
轻松5句话解决JavaScript的作用域
Jul 15 Javascript
原生JS实现匀速图片轮播动画
Oct 18 Javascript
浅谈mvvm-simple双向绑定简单实现
Apr 18 Javascript
浅谈针对Vue相同路由不同参数的刷新问题
Sep 29 Javascript
微信小程序实现多个按钮的颜色状态转换
Feb 15 Javascript
从零撸一个pc端vue的ui组件库( 计数器组件 )
Aug 08 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
SONY ICF-F10中波修复记
2021/03/02 无线电
PHP扩展编写点滴 技巧收集
2010/03/09 PHP
php二分查找二种实现示例
2014/03/12 PHP
PHP实现财务审核通过后返现金额到客户的功能
2019/07/04 PHP
浅谈Laravel中的三种中间件的作用
2019/10/13 PHP
javascript背投广告代码的完善
2008/04/08 Javascript
jquery的冒泡事件的阻止与允许(三种实现方法)
2013/02/01 Javascript
超简单JS二级、多级联动的简单实例
2014/02/18 Javascript
JQuery动画animate的stop方法使用详解
2014/05/09 Javascript
JavaScript字符串对象replace方法实例(用于字符串替换或正则替换)
2014/10/16 Javascript
text-align:justify实现文本两端对齐 兼容IE
2015/08/19 Javascript
JS实现左右拖动改变内容显示区域大小的方法
2015/10/13 Javascript
JS组件系列之Bootstrap Icon图标选择组件
2016/01/28 Javascript
JavaScript SweetAlert插件实现超酷消息警告框
2016/01/28 Javascript
JavaScript获取当前url根目录(路径)
2016/06/17 Javascript
JavaScript代码里的判断小结
2016/08/22 Javascript
win系统下nodejs环境安装配置
2017/05/04 NodeJs
微信小程序使用image组件显示图片的方法【附源码下载】
2017/12/08 Javascript
基于vue 开发中出现警告问题去除方法
2018/01/25 Javascript
原生javascript实现连连看游戏
2019/01/03 Javascript
简述ES6新增关键字let与var的区别
2019/08/23 Javascript
js实现烟花特效
2020/03/02 Javascript
Python之str操作方法(详解)
2017/06/19 Python
Python自动化运维之IP地址处理模块详解
2017/12/10 Python
Python matplotlib生成图片背景透明的示例代码
2019/08/30 Python
你需要学会的8个Python列表技巧
2020/06/24 Python
Python图像识别+KNN求解数独的实现
2020/11/13 Python
项目资料员岗位职责
2013/12/10 职场文书
最新大学职业规划书范文
2013/12/30 职场文书
总结表彰大会主持词
2014/03/26 职场文书
大学新生入学教育方案
2014/05/16 职场文书
安全标语口号
2014/06/09 职场文书
法人授权委托书公证范本
2014/09/14 职场文书
教师工作失职检讨书
2014/09/18 职场文书
Python人工智能之混合高斯模型运动目标检测详解分析
2021/11/07 Python
解决vue自定义组件@click点击失效问题
2022/04/30 Vue.js