使用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 相关文章推荐
一段实时更新的时间代码
Jul 07 Javascript
基于jQuery的的一个隔行变色,鼠标移动变色的小插件
Jul 06 Javascript
JavaScript控制Session操作方法
Jan 17 Javascript
开发 Internet Explorer 右键功能表(ContextMenu)
Jul 03 Javascript
javascript避免数字计算精度误差的方法详解
Mar 05 Javascript
基于JQuery实现分隔条的功能
Jun 17 Javascript
JavaScript使用atan2来绘制箭头和曲线的实例
Sep 14 Javascript
Vue单页面应用保证F5强刷不清空数据的解决方案
Jan 31 Javascript
JS实现的将html转为pdf功能【基于浏览器端插件jsPDF】
Feb 06 Javascript
vue-lazyload使用总结(推荐)
Nov 01 Javascript
React实现阿里云OSS上传文件的示例
Aug 10 Javascript
javascript实现智能手环时间显示
Sep 18 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模板之Phpbean的目录结构
2008/01/10 PHP
ThinkPHP模板Switch标签用法示例
2014/06/30 PHP
php实现的click captcha点击验证码类实例
2014/09/23 PHP
php简单防盗链实现方法
2015/07/29 PHP
PHP截取发动短信内容的方法
2017/07/04 PHP
搭建自己的PHP MVC框架详解
2017/08/16 PHP
js里怎么取select标签里的值并修改
2012/12/10 Javascript
JavaScript学习笔记之基础语法
2015/01/22 Javascript
Jquery 实现checkbox全选方法
2015/01/28 Javascript
fastclick插件导致日期(input[type=&quot;date&quot;])控件无法被触发该如何解决
2015/11/09 Javascript
Angular2-primeNG文件上传模块FileUpload使用详解
2017/01/14 Javascript
Angular中$state.go页面跳转并传递参数的方法
2017/05/09 Javascript
详解通过源码解析Node.js中cluster模块的主要功能实现
2018/05/16 Javascript
vue中用 async/await 来处理异步操作
2020/07/18 Javascript
[51:29]完美世界DOTA2联赛循环赛 Matador vs Forest BO2第一场 11.05
2020/11/05 DOTA
实例探究Python以并发方式编写高性能端口扫描器的方法
2016/06/14 Python
解决pandas 作图无法显示中文的问题
2018/05/24 Python
python调用百度语音REST API
2018/08/30 Python
在Python中给Nan值更改为0的方法
2018/10/30 Python
Python发送邮件功能示例【使用QQ邮箱】
2018/12/04 Python
Django Rest framework三种分页方式详解
2019/07/26 Python
Python无损压缩图片的示例代码
2020/08/06 Python
3种方式实现瀑布流布局小结
2019/09/05 HTML / CSS
食品行业求职人的自我评价
2014/01/19 职场文书
大学生自我评价范文分享
2014/02/21 职场文书
入学申请自荐信范文
2014/02/26 职场文书
马丁路德金演讲稿
2014/05/19 职场文书
党员民主生活会整改措施
2014/09/26 职场文书
2014年检验科工作总结
2014/11/22 职场文书
全国爱牙日活动总结
2015/02/05 职场文书
幼儿教师辞职信
2015/02/27 职场文书
不服劳动仲裁起诉书
2015/05/20 职场文书
初中团委工作总结
2015/08/13 职场文书
pytorch 中nn.Dropout的使用说明
2021/05/20 Python
分析Python感知线程状态的解决方案之Event与信号量
2021/06/16 Python
nginx配置限速限流基于内置模块
2022/05/02 Servers