基于复选框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 学习笔记一些小技巧
Mar 28 Javascript
使用Microsoft Ajax Minifier减小JavaScript文件大小的方法
Apr 01 Javascript
开发中可能会用到的jQuery小技巧
Mar 07 Javascript
jquery实现鼠标滑过小图时显示大图的方法
Jan 14 Javascript
jquery实现鼠标拖拽滑动效果来选择数字的方法
May 04 Javascript
Bootstrap实现响应式导航栏效果
Dec 28 Javascript
Javascript数组中push方法用法分析
Oct 31 Javascript
jQuery弹出div层过2秒自动消失
Nov 29 Javascript
快速实现JS图片懒加载(可视区域加载)示例代码
Jan 04 Javascript
详解Vue.js Mixins 混入使用
Sep 15 Javascript
微信小程序自定义tab实现多层tab嵌套功能
Jun 15 Javascript
JavaScript中 ES6变量的结构赋值
Jul 10 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
php5 mysql分页实例代码
2008/04/10 PHP
php 文件上传类代码
2011/08/06 PHP
phpword插件导出word文件时中文乱码问题处理方案
2014/08/19 PHP
PHP防止注入攻击实例分析
2014/11/03 PHP
微信公众平台开发教程⑥ 微信开发集成类的使用图文详解
2019/04/10 PHP
基于jQuery的公告无限循环滚动实现代码
2012/05/11 Javascript
JS保存、读取、换行、转Json报错处理方法
2013/06/14 Javascript
JS嵌套函数调用上下文的问题解决
2014/03/26 Javascript
js实现仿百度瀑布流的方法
2015/02/05 Javascript
快速学习JavaScript的6个思维技巧
2015/10/13 Javascript
详谈JS中实现种子随机数及作用
2016/07/19 Javascript
easyui datagrid 大数据加载效率慢,优化解决方法(推荐)
2016/11/09 Javascript
js以分隔符分隔数组中的元素并转换为字符串的方法
2016/11/16 Javascript
Angular.JS中select下拉框设置value的方法
2017/06/20 Javascript
JavaScript学习笔记之函数记忆
2017/09/06 Javascript
HTML5开发Kinect体感游戏的实例应用
2017/09/18 Javascript
详解vue-router 命名路由和命名视图
2018/06/01 Javascript
LayerClose弹窗关闭刷新方法
2018/08/17 Javascript
node.js使用免费的阿里云ip查询获取ip所在地【推荐】
2018/09/03 Javascript
微信小程序整个页面的自动适应布局的实现
2020/07/12 Javascript
[02:43]2014DOTA2国际邀请赛 官方Alliance战队纪录片
2014/07/14 DOTA
python一行sql太长折成多行并且有多个参数的方法
2018/07/19 Python
PyCharm配置mongo插件的方法
2018/11/30 Python
uwsgi+nginx部署Django项目操作示例
2018/12/04 Python
Python读取分割压缩TXT文本文件实例
2020/02/14 Python
Python编程快速上手——疯狂填词程序实现方法分析
2020/02/29 Python
New delete 与malloc free 的联系与区别
2013/02/04 面试题
公司财务总监岗位职责
2013/12/14 职场文书
信息技术教学反思
2014/02/12 职场文书
现场施工员岗位职责
2014/03/10 职场文书
竞选班长的演讲稿
2014/04/24 职场文书
酒店仓管员岗位职责
2015/04/01 职场文书
建党伟业的观后感
2015/06/01 职场文书
SpringBoot2零基础到精通之数据库专项精讲
2022/03/22 Java/Android
vue/cli 配置动态代理无需重启服务的方法
2022/05/20 Vue.js
Python使用Opencv打开笔记本电脑摄像头报错解问题及解决
2022/06/21 Python