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 相关文章推荐
javascript中的undefined 与 null 的区别  补充篇
Mar 17 Javascript
safari,opera嵌入iframe页面cookie读取问题解决方法
Jun 23 Javascript
解决Extjs上传图片无法预览的解决方法
Mar 22 Javascript
javascript连续赋值问题
Jul 08 Javascript
jquery延迟对象解析
Oct 26 Javascript
Ajax的概述与实现过程
Nov 18 Javascript
Bootstrap模态框案例解析
Mar 05 Javascript
jQuery中过滤器的基本用法示例
Oct 11 jQuery
使用 Javascript 实现浏览器推送提醒功能的示例
Nov 03 Javascript
vue项目中使用particles实现粒子背景效果及遇到的坑(按钮没有点击响应)
Feb 11 Javascript
vue学习笔记之给组件绑定原生事件操作示例
Feb 27 Javascript
javascript+css实现进度条效果
Mar 25 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
深入解析PHP的引用计数机制
2013/06/14 PHP
php输出1000以内质数(素数)示例
2014/02/16 PHP
php实现的操作excel类详解
2016/01/15 PHP
Yii2前后台分离及migrate使用(七)
2016/05/04 PHP
Yii2.0中的COOKIE和SESSION用法
2016/08/12 PHP
ThinkPHP5实现作业管理系统中处理学生未交作业与已交作业信息的方法
2016/11/12 PHP
PHP自定义递归函数实现数组转JSON功能【支持GBK编码】
2018/07/17 PHP
HTML代码中标签的全部属性 中文注释说明
2009/03/26 Javascript
让ie运行js时提示允许阻止内容运行的解决方法
2010/10/24 Javascript
javascript生成随机数方法汇总
2015/11/12 Javascript
React-Native使用Mobx实现购物车功能
2017/09/14 Javascript
为vue-router懒加载时下载js的过程中添加loading提示避免无响应问题
2018/04/03 Javascript
基于jQuery.i18n实现web前端的国际化
2018/05/04 jQuery
解决Mac node版本升级失败的问题
2018/05/16 Javascript
微信小程序实现人脸识别登陆的示例代码
2019/04/02 Javascript
Vue中的组件及路由使用实例代码详解
2019/05/22 Javascript
JS端基于download.js实现图片、视频时直接下载而不是打开预览
2020/05/09 Javascript
Flask框架的学习指南之开发环境搭建
2016/11/20 Python
用Python实现KNN分类算法
2017/12/22 Python
Python实现的栈(Stack)
2018/01/26 Python
运用TensorFlow进行简单实现线性回归、梯度下降示例
2018/03/05 Python
python生成随机红包的实例写法
2019/09/02 Python
学python安装的软件总结
2019/10/12 Python
如何关掉pycharm中的python console(图解)
2019/10/31 Python
python 数据库查询返回list或tuple实例
2020/05/15 Python
一文解决django 2.2与mysql兼容性问题
2020/07/15 Python
python实现每天自动签到领积分的示例代码
2020/08/18 Python
使用HTML5 Canvas绘制圆角矩形及相关的一些应用举例
2016/03/22 HTML / CSS
Vita Fede官网:在意大利手工制作,在纽约市设计
2019/10/25 全球购物
CheapTickets泰国:廉价航班,查看促销价格并预订机票
2019/12/28 全球购物
软件测试面试题
2014/01/05 面试题
银行演讲稿范文
2014/01/03 职场文书
幼儿园教师辞职信
2014/01/18 职场文书
设备技术员岗位职责
2015/04/11 职场文书
起诉书格式范文
2015/05/20 职场文书
vue+spring boot实现校验码功能
2021/05/27 Vue.js