基于复选框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 相关文章推荐
繁简字转换功能
Jul 19 Javascript
IE 下的只读 innerHTML
Aug 21 Javascript
jQuery之网页换肤实现代码
Apr 30 Javascript
jQuery中的编程范式详解
Dec 15 Javascript
js预加载图片方法汇总
Jun 15 Javascript
jQuery实现的简洁下拉菜单导航效果代码
Aug 26 Javascript
textarea 在浏览器中固定大小和禁止拖动的实现方法
Dec 03 Javascript
基于JavaScript实现自动更新倒计时效果
Dec 19 Javascript
原生js封装运动框架的示例讲解
Oct 01 Javascript
浅谈js闭包理解
Mar 28 Javascript
浅谈react-router@4.0 使用方法和源码分析
Jun 04 Javascript
vue组件开发之slider组件使用详解
Aug 21 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 strrpos()与strripos()函数
2013/08/31 PHP
php教程之phpize使用方法
2014/02/12 PHP
Symfony2函数用法实例分析
2016/03/18 PHP
PHP链表操作简单示例
2016/10/15 PHP
PHP合并数组的2种方法小结
2016/11/24 PHP
几个比较经典常用的jQuery小技巧
2010/03/01 Javascript
跟我一起学写jQuery插件开发方法(附完整实例及下载)
2010/04/01 Javascript
利用jQuery操作对象数组的实现代码
2011/04/27 Javascript
js图片模糊切换显示特效的方法
2015/02/17 Javascript
Backbone.js 0.9.2 源码注释中文翻译版
2015/06/25 Javascript
Ext JS框架中日期函数的用法及日期选择控件的实现
2016/05/21 Javascript
集合Bootstrap自定义confirm提示效果
2017/09/19 Javascript
JS实现的将html转为pdf功能【基于浏览器端插件jsPDF】
2018/02/06 Javascript
解决webpack无法通过IP地址访问localhost的问题
2018/02/22 Javascript
微信小程序调用微信支付接口的实现方法
2019/04/29 Javascript
详解利用eventemitter2实现Vue组件通信
2019/11/04 Javascript
JavaScript仿京东轮播图效果
2021/02/25 Javascript
[14:19]2018年度COSER大赛-完美盛典
2018/12/16 DOTA
Python天气预报采集器实现代码(网页爬虫)
2012/10/07 Python
python获得文件创建时间和修改时间的方法
2015/06/30 Python
python遍历目录的方法小结
2016/04/28 Python
Python使用Paramiko模块编写脚本进行远程服务器操作
2016/05/05 Python
使用Python的Twisted框架编写非阻塞程序的代码示例
2016/05/25 Python
Django框架实现的简单分页功能示例
2018/12/04 Python
Python文件读写常见用法总结
2019/02/22 Python
Python pandas实现excel工作表合并功能详解
2019/08/29 Python
详解基于python-django框架的支付宝支付案例
2019/09/23 Python
Pytorch 实现focal_loss 多类别和二分类示例
2020/01/14 Python
Python处理mysql特殊字符的问题
2020/03/02 Python
python实现测试工具(二)——简单的ui测试工具
2020/10/19 Python
Onzie官网:美国时尚瑜伽品牌
2019/08/21 全球购物
售后前台接待岗位职责
2015/04/03 职场文书
微观世界观后感
2015/06/10 职场文书
推荐六本经典文学奖书籍:此生必读
2019/08/22 职场文书
python用tkinter开发的扫雷游戏
2021/06/01 Python
浅谈 JavaScript 沙箱Sandbox
2021/11/02 Javascript