使用prop解决一个checkbox选中后再次选中失效的问题


Posted in Javascript onJuly 05, 2017

//问题点

初始状态复选框没有全选,

点击全选按钮调用checkAll方法,

实现了全选,

然后点击全不选按钮,

 

实现了全不选,

然后再次点击全选按钮,

结果却木有全选,

再反复点击木有任何反应。

demo:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script src="js/jquery-1.11.3.min.js"></script>
  <script>
    $(function () {
      $("#allchoose").click(function () {
          $(":checkbox").prop("checked",true);
      })
      $("#allnochoose").click(function () {
        if ($(":checkbox").is(":checked")){
          $(":checkbox").attr("checked",false);
        }
      })
      $("#choose").click(function () {
        if($(":checkbox").is(":checked")){
          $(":checkbox").attr("checked",false);
        }else{
          $(":checkbox").prop("checked",true);
        }
      })
    })
  </script>
</head>
<body>
<input type="checkbox" name="checkbox" id="">乒乓球
<input type="checkbox" name="checkbox" id="">羽毛球
<input type="checkbox" name="checkbox" id="">足球
<input type="checkbox" name="checkbox" id="">篮球
<input type="checkbox" name="checkbox" id="">排球<br>
<input type="button" value="全选" id="allchoose">
<input type="button" value="全不选" id="allnochoose">
<input type="button" value="反选" id="choose">
<input type="submit" value="提交" id="submit">
</body>
</html>

以上这篇使用prop解决一个checkbox选中后再次选中失效的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
理解Javascript_15_作用域分配与变量访问规则,再送个闭包
Oct 20 Javascript
js实现的跟随鼠标移动的时钟效果(中英文日期显示)
Jan 17 Javascript
document.documentElement和document.body区别介绍
Sep 16 Javascript
javascript实现颜色渐变的方法
Oct 30 Javascript
Jquery遍历节点的方法小集
Jan 22 Javascript
javascript(js)的小数点乘法除法问题详解
Mar 07 Javascript
node-webkit打包成exe文件被360误报木马的解决方法
Mar 11 Javascript
JavaScript创建闭包的两种方式的优劣与区别分析
Jun 22 Javascript
再JavaScript的jQuery库中编写动画效果的指南
Aug 13 Javascript
Bootstrap BootstrapDialog使用详解
Feb 17 Javascript
Node.js环境下Koa2添加travis ci持续集成工具的方法
Jun 19 Javascript
微信小程序实现拨打电话功能的示例代码
Jun 28 Javascript
JS鼠标滚动分页效果示例
Jul 05 #Javascript
jQuery实现返回顶部按钮和scroll滚动功能[带动画效果]
Jul 05 #jQuery
Angular 2父子组件数据传递之@Input和@Output详解 (上)
Jul 05 #Javascript
js实现图片旋转 js滚动鼠标中间对图片放大缩小
Jul 05 #Javascript
vue2.X组件学习心得(新手必看篇)
Jul 05 #Javascript
Angular2 自定义validators的实现方法
Jul 05 #Javascript
js获取元素的偏移量offset简单方法(必看)
Jul 05 #Javascript
You might like
星际初学者游戏中永远要做的事
2020/03/04 星际争霸
用PHP实现的随机广告显示代码
2007/06/14 PHP
php中将图片gif,jpg或mysql longblob或blob字段值转换成16进制字符串
2011/08/23 PHP
php制作unicode解码工具(unicode编码转换器)代码分享
2013/12/24 PHP
php常用字符函数实例小结
2016/12/29 PHP
PHP对象实例化单例方法
2017/01/19 PHP
javascript hashtable 修正版 下载
2010/12/30 Javascript
关于query Javascript CSS Selector engine
2013/04/12 Javascript
鼠标移到导航当前位置的LI变色处于选中状态
2013/08/23 Javascript
jQuery scroll事件实现监控滚动条分页示例
2014/04/04 Javascript
vue的props实现子组件随父组件一起变化
2016/10/27 Javascript
Javascript中关于Array.filter()的妙用详解
2016/12/04 Javascript
JavaScript之浏览器对象_动力节点Java学院整理
2017/07/03 Javascript
老生常谈js数据类型
2017/08/03 Javascript
详解动画插件wow.js的使用方法
2017/09/13 Javascript
微信小程序实现页面下拉刷新和上拉加载功能详解
2018/12/03 Javascript
微信小程序常用简易小函数总结
2019/02/01 Javascript
JS实现在线ps功能详解
2019/07/31 Javascript
详解Nuxt内导航栏的两种实现方式
2020/04/16 Javascript
[01:56]林书豪DOTA2上海特级锦标赛励志短片
2016/03/05 DOTA
浅谈python中scipy.misc.logsumexp函数的运用场景
2016/06/23 Python
Django自定义用户认证示例详解
2018/03/14 Python
Python File(文件) 方法整理
2019/02/18 Python
Python3.5内置模块之random模块用法实例分析
2019/04/26 Python
用pytorch的nn.Module构造简单全链接层实例
2020/01/14 Python
利用Python实现自动扫雷小脚本
2020/12/17 Python
狗狗玩具、零食和咀嚼物的月度送货服务:Super Chewer
2018/08/22 全球购物
质检部经理岗位职责
2014/02/19 职场文书
让生命充满爱演讲稿
2014/05/10 职场文书
五四青年节的活动方案
2014/08/20 职场文书
护士自荐信怎么写
2015/03/06 职场文书
起诉意见书范文
2015/05/19 职场文书
小学中队长竞选稿
2015/11/20 职场文书
python tkinter模块的简单使用
2021/04/07 Python
Python写情书? 10行代码展示如何把情书写在她的照片里
2022/04/21 Python
Java线程的6种状态与生命周期
2022/05/11 Java/Android