基于复选框demo(分享)


Posted in Javascript onSeptember 27, 2017

本篇文章是关于复选框的,有2种形式:1、全选、反选由2个按钮实现;2、全选、反选由一个按钮实现。

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title>复选框demo</title>
  <script src="../js/jquery-1.10.2.js" type="text/javascript"></script>
  <style>
   body{ text-align:center} 
   .con{ margin:100px auto; width:800px; height:400px; border:1px solid #F00; padding-top: 50px;} 
  </style> 
 </head>
 <body>
  <div class="con">
   <span><input type='checkbox' name='select' onclick='allSelect()'>全选</span>
   <span><input type='checkbox' name='cancel' onclick='unAllSelect()'>反选</span>
   <span><input type='checkbox' name='fruit' />苹果</span>
   <span><input type='checkbox' name='fruit' />香蕉</span>
   <span><input type='checkbox' name='fruit' />梨子</span>
   <span><input type='checkbox' name='fruit' />桃子</span>
   <span><input type='checkbox' name='fruit' />西瓜</span>
   
   <br><br><br>
   
   <span><input type='checkbox' id="allBook" name='allBook' />全选</span>
   <span><input type='checkbox' name='book' />老子</span>
   <span><input type='checkbox' name='book' />尚书</span>
   <span><input type='checkbox' name='book' />周易</span>
   <span><input type='checkbox' name='book' />诗经</span>
   <span><input type='checkbox' name='book' />孟子</span>
   <span><input type='checkbox' name='book' />中庸</span>
   
<script type="text/javascript">
 //全选
 function allSelect(){
  $("input[name='fruit']").prop("checked", "checked");
  $("input[name='cancel']").removeAttr("checked");
 }
 //反选
 function unAllSelect(){
  $("input[name='fruit']").removeAttr("checked");
  $("input[name='select']").removeAttr("checked");
 }
 //单选
 $("#allBook").click(function(){
  if(this.checked){
//   $("input[name='book']").attr("checked", true);
   $("input[name='book']").prop("checked", "checked");
   }else{
//   $("input[name='book']").attr("checked", false);
   $("input[name='book']").removeAttr("checked");
   }
 });
</script>

  </div>
 </body>
</html>

在实践中碰到一个问题——check全选失效。解决办法,使用prop方法代替attr。

$("input[name='book']").attr("checked", "checked"); 
$("input[name='book']").prop("checked", "checked");

这或许是和jQuery版本有关。

以上这篇基于复选框demo(分享)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript 原型模式实现OOP的再研究
Apr 09 Javascript
深入理解JavaScript系列(14) 作用域链介绍(Scope Chain)
Apr 12 Javascript
基于jQuery实现放大镜特效
Oct 19 Javascript
JavaScript类型系统之Object详解
Jan 07 Javascript
深入理解JS实现快速排序和去重
Oct 17 Javascript
js实现hashtable的赋值、取值、遍历操作实例详解
Dec 25 Javascript
ES6新特性二:Iterator(遍历器)和for-of循环详解
Apr 20 Javascript
详解基于webpack2.x的vue2.x的多页面站点
Aug 21 Javascript
解决jquery validate 验证不通过后验证正确的信息仍残留在label上的方法
Aug 27 jQuery
vue 框架下自定义滚动条(easyscroll)实现方法
Aug 29 Javascript
前端开发之便利店收银系统代码
Dec 27 Javascript
wepy--用vantUI 实现上弹列表并选择相应的值操作
Nov 03 Javascript
EasyUI框架 使用Ajax提交注册信息的实现代码
Sep 27 #Javascript
angular内置provider之$compileProvider详解
Sep 27 #Javascript
详解Node.js利用node-git-server快速搭建git服务器
Sep 27 #Javascript
微信小程序 循环及嵌套循环的使用总结
Sep 26 #Javascript
Node.js dgram模块实现UDP通信示例代码
Sep 26 #Javascript
深入理解ES6 Promise 扩展always方法
Sep 26 #Javascript
微信小程序开发之IOS和Android兼容的问题
Sep 26 #Javascript
You might like
基于PHP编程注意事项的小结
2013/04/27 PHP
javascript的字符串按引用复制和传递,按值来比较介绍与应用
2012/12/28 Javascript
Javascript中产生固定结果的函数优化技巧
2013/01/16 Javascript
JS操作数据库的实例代码
2013/10/17 Javascript
js获取url参数代码实例分享(JS操作URL)
2013/12/13 Javascript
jquery获取颜色在ie和ff下的区别示例介绍
2014/03/28 Javascript
javascript多物体运动实现方法分析
2016/01/08 Javascript
BootstrapTable+KnockoutJS自定义T4模板快速生成增删改查页面
2016/08/01 Javascript
微信小程序 教程之模板
2016/10/18 Javascript
功能强大的jquery.validate表单验证插件
2016/11/07 Javascript
Vue内容分发slot(全面解析)
2017/08/19 Javascript
ng-zorro-antd 入门初体验
2018/12/03 Javascript
JavaScript中的ES6 Proxy的具体使用
2019/06/16 Javascript
js设置鼠标悬停改变背景色实现详解
2019/06/26 Javascript
nuxt配置通过指定IP和端口访问的实现
2020/01/08 Javascript
javascript设计模式之装饰者模式
2020/01/30 Javascript
有趣的JavaScript隐式类型转换操作实例分析
2020/05/02 Javascript
详解js中的原型,原型对象,原型链
2020/07/16 Javascript
python求解水仙花数的方法
2015/05/11 Python
PyChar学习教程之自定义文件与代码模板详解
2017/07/17 Python
Python回文字符串及回文数字判定功能示例
2018/03/20 Python
Python使用itertools模块实现排列组合功能示例
2018/07/02 Python
Python input函数使用实例解析
2019/11/22 Python
Python中类似于jquery的pyquery库用法分析
2019/12/02 Python
tensorflow 保存模型和取出中间权重例子
2020/01/24 Python
python的sys.path模块路径添加方式
2020/03/09 Python
美国时尚大码女装购物网站:Avenue
2019/05/24 全球购物
乐高奥地利官方商店:LEGO Shop AT
2019/07/16 全球购物
美国一家著名的手表在线折扣网站:Discount Watch Store
2020/02/24 全球购物
三好学生演讲稿范文
2014/04/26 职场文书
网络编辑求职信
2014/04/30 职场文书
文明村镇申报材料
2014/05/06 职场文书
2015年酒店服务员工作总结
2015/05/18 职场文书
民事申诉状范本
2015/05/20 职场文书
解析CSS 提取图片主题色功能(小技巧)
2021/05/12 HTML / CSS
世界十大动漫制作公司排行榜,迪士尼上榜,第二是美国代表性文化符
2022/03/18 欧美动漫