使用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 相关文章推荐
node.js中的http.createServer方法使用说明
Dec 14 Javascript
JavaScript通过select动态更换图片的方法
Mar 23 Javascript
浅谈Javascript的静态属性和原型属性
May 07 Javascript
Vue 2.0+Vue-router构建一个简单的单页应用(附源码)
Mar 14 Javascript
Vue组件通信实践记录(推荐)
Aug 15 Javascript
一次记住JavaScript的6个正则表达式方法
Feb 22 Javascript
angular项目中bootstrap-datetimepicker时间插件的使用示例
Mar 15 Javascript
p5.js入门教程之小球动画示例代码
Mar 15 Javascript
JS判断字符串是否为整数的方法--简单的正则判断
Jul 23 Javascript
vue-cli整合vuex的时候,修改actions和mutations,实现热部署的方法
Sep 19 Javascript
利用JavaScript的Map提升性能的方法详解
Aug 14 Javascript
js获取图片的base64编码并压缩
Dec 05 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
10个实用的PHP正则表达式汇总
2014/10/23 PHP
javascript 动态修改样式和层叠样式表代码
2010/04/27 Javascript
围观tangram js库
2010/12/28 Javascript
js下拉框二级关联菜单效果代码具体实现
2013/08/03 Javascript
JQuery判断子iframe何时加载完成解决方案
2013/08/20 Javascript
如何正确使用Nodejs 的 c++ module 链接到 OpenSSL
2014/08/03 NodeJs
JavaScript中的toLocaleLowerCase()方法使用详解
2015/06/06 Javascript
Node.js websocket使用socket.io库实现实时聊天室
2017/02/20 Javascript
js css3实现图片拖拽效果
2017/03/04 Javascript
js HTML5 canvas绘制图片的方法
2017/09/08 Javascript
nodejs简单读写excel内容的方法示例
2018/03/16 NodeJs
element ui table(表格)实现点击一行展开功能
2018/12/04 Javascript
Node.js assert断言原理与用法分析
2019/01/04 Javascript
jquery实现下载图片功能
2019/07/18 jQuery
javascript 数组(list)添加/删除的实现
2020/12/17 Javascript
[18:20]DOTA2 HEROS教学视频教你分分钟做大人-昆卡
2014/06/11 DOTA
python 线程的暂停, 恢复, 退出详解及实例
2016/12/06 Python
python中多个装饰器的执行顺序详解
2018/10/08 Python
Python提取支付宝和微信支付二维码的示例代码
2019/02/15 Python
python获取Pandas列名的几种方法
2019/08/07 Python
python tornado修改log输出方式
2019/11/18 Python
Django REST 异常处理详解
2020/07/15 Python
澳洲国民品牌乡村路折扣店:Country Road & Trenery Outlet
2018/04/19 全球购物
美国牛仔品牌:True Religion
2018/11/16 全球购物
法学函授自我鉴定
2014/02/06 职场文书
优秀本科生求职推荐信
2014/02/24 职场文书
护理专业自荐书
2014/06/04 职场文书
分公司总经理岗位职责
2014/08/03 职场文书
庆六一文艺汇演活动方案
2014/08/26 职场文书
领导班子对照检查剖析材料
2014/10/13 职场文书
小学语文复习计划
2015/01/19 职场文书
端午节活动总结报告
2015/02/11 职场文书
家长会开场白和结束语
2015/05/29 职场文书
nginx location中多个if里面proxy_pass的方法
2021/03/31 Servers
漫画「日和酱的要求是绝对的」第3卷封面公开
2022/03/21 日漫