基于复选框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 相关文章推荐
ext form 表单提交数据的方法小结
Aug 08 Javascript
javascript 单例/单体模式(Singleton)
Apr 07 Javascript
七个很有意思的PHP函数
May 12 Javascript
jquery html动态添加的元素绑定事件详解
May 24 Javascript
Vue2.0实现将页面中表格数据导出excel的实例
Aug 09 Javascript
input输入框内容实时监测(附代码)
Aug 15 Javascript
关于 angularJS的一些用法
Nov 29 Javascript
Vue 组件(component)教程之实现精美的日历方法示例
Jan 08 Javascript
基于layui数据表格以及传数据的方式
Aug 19 Javascript
详解javascript设计模式三:代理模式
Mar 25 Javascript
你可能从未使用过的11+个JavaScript特性(小结)
Jan 08 Javascript
JavaScript实现轮播图片完整代码
Mar 07 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代码
2007/03/08 PHP
php中函数的形参与实参的问题说明
2010/09/01 PHP
php实现的双向队列类实例
2014/09/24 PHP
php 多继承的几种常见实现方法示例
2019/11/18 PHP
判断页面是关闭还是刷新的js代码
2007/01/28 Javascript
用JavaScript编写COM组件的步骤
2009/03/17 Javascript
JS 字符串连接[性能比较]
2009/05/10 Javascript
JQuery从头学起第一讲
2010/07/04 Javascript
javascript下string.format函数补充
2010/08/24 Javascript
IE6 fixed的完美解决方案
2011/03/31 Javascript
javascript实现避免页面按钮重复提交
2015/01/08 Javascript
jquery性能优化高级技巧
2015/08/24 Javascript
基于JavaScript实现的折半查找算法示例
2017/04/14 Javascript
JavaScript中Hoisting详解 (变量提升与函数声明提升)
2017/08/18 Javascript
浅谈SpringMVC中post checkbox 多选框value的值(隐藏域方式)
2018/01/08 Javascript
TypeScript开发Node.js程序的方法
2019/04/30 Javascript
在Node.js中将SVG图像转换为PNG,JPEG,TIFF,WEBP和HEIF格式的方法
2019/08/22 Javascript
微信小程序封装多张图片上传api代码实例
2019/12/30 Javascript
2019年度web前端面试题总结(主要为Vue面试题)
2020/01/12 Javascript
微信小程序选择图片控件
2021/01/19 Javascript
跟老齐学Python之不要红头文件(2)
2014/09/28 Python
Saltstack快速入门简单汇总
2016/03/01 Python
python自动发邮件库yagmail的示例代码
2018/02/23 Python
Python3非对称加密算法RSA实例详解
2018/12/06 Python
Python根据当前日期取去年同星期日期
2019/04/14 Python
python 监测内存和cpu的使用率实例
2019/11/28 Python
python3将变量写入SQL语句的实现方式
2020/03/02 Python
Python脚本如何在bilibili中查找弹幕发送者
2020/06/04 Python
免税水晶:Duty Free Crystal
2019/05/13 全球购物
旅游网创业计划书
2014/01/31 职场文书
结婚喜宴主持词
2014/03/14 职场文书
项目投资合作意向书
2014/07/29 职场文书
股东出资证明书(正规版)
2014/09/24 职场文书
教师岗位职责
2015/02/03 职场文书
浅谈Nginx 中的两种限流方式
2021/03/31 Servers
Python办公自动化之教你用Python批量识别发票并录入到Excel表格中
2021/06/26 Python