使用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 参考教程
Dec 29 Javascript
JS 建立对象的方法
Apr 21 Javascript
实现变速回到顶部的JavaScript代码
May 09 Javascript
原生js实现shift/ctrl/alt按键的获取
Apr 08 Javascript
js中将String转换为number以便比较
Jul 08 Javascript
jQuery中ajax的post()方法用法实例
Dec 26 Javascript
基于JavaScript实现瀑布流效果(循环渐近)
Jan 27 Javascript
AngularJS基础 ng-mouseover 指令简单示例
Aug 02 Javascript
Angular-Touch库用法示例
Dec 22 Javascript
使用node.js实现微信小程序实时聊天功能
Aug 13 Javascript
vue-rx的初步使用教程
Sep 21 Javascript
原生javascript单例模式的应用实例分析
Feb 23 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
PHP网站提速三大“软”招
2006/10/09 PHP
fleaphp常用方法分页之Pager使用方法
2011/04/23 PHP
在Yii2中使用Pjax导致Yii2内联脚本载入失败的原因分析
2016/03/06 PHP
Yii中CGridView禁止列排序的设置方法
2016/07/12 PHP
PHP实现带重试功能的curl连接示例
2016/07/28 PHP
ThinkPHP5实现作业管理系统中处理学生未交作业与已交作业信息的方法
2016/11/12 PHP
IE6下JS动态设置图片src地址问题
2010/01/08 Javascript
Jquery + Ajax调用webService实例代码(asp.net)
2010/08/27 Javascript
js 为label标签和div标签赋值的方法
2013/08/08 Javascript
javascript动态向网页中添加表格实现代码
2014/02/19 Javascript
jquery自定义下拉列表示例
2014/04/25 Javascript
asp.net中oracle 存储过程(图文)
2015/08/12 Javascript
javascript数组去重小结
2016/03/07 Javascript
修改ligerui 默认确认按钮的方法
2016/12/27 Javascript
微信小程序开发之入门实例教程篇
2017/03/07 Javascript
vue生成token保存在客户端localStorage中的方法
2017/10/25 Javascript
JavaScript中Object基础内部方法图
2018/02/05 Javascript
angular将html代码输出为内容的实例
2018/09/30 Javascript
python实现去除下载电影和电视剧文件名中的多余字符的方法
2014/09/23 Python
pycharm 在windows上编辑代码用linux执行配置的方法
2018/10/27 Python
python中通过selenium简单操作及元素定位知识点总结
2019/09/10 Python
Python3.7 基于 pycryptodome 的AES加密解密、RSA加密解密、加签验签
2019/12/04 Python
Python进行统计建模
2020/08/10 Python
美国在线购买空气净化器、除湿器、加湿器网站:AllergyBuyersClub
2021/03/16 全球购物
linux系统都有哪些运行级别
2016/03/26 面试题
小学教师的个人自我鉴定
2013/10/24 职场文书
医科大学生的自我评价
2013/12/04 职场文书
教育课题研究自我鉴定范文
2013/12/28 职场文书
司仪主持词两篇
2014/03/22 职场文书
市委召开党的群众路线教育实践活动总结大会报告
2014/10/21 职场文书
加强干部作风建设整改方案
2014/10/24 职场文书
2014初中数学教研组工作总结
2014/12/19 职场文书
病人写给医生的感谢信
2015/01/23 职场文书
邀请书模板
2015/02/02 职场文书
2015年调度员工作总结
2015/04/30 职场文书
基于Redis延迟队列的实现代码
2021/05/13 Redis