使用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 相关文章推荐
从零开始学习jQuery (四) jQuery中操作元素的属性与样式
Feb 23 Javascript
JSON.stringify 语法实例讲解
Mar 14 Javascript
将中国标准时间转换成标准格式的代码
Mar 20 Javascript
jQuery事件绑定和委托实例
Nov 25 Javascript
web前端开发JQuery常用实例代码片段(50个)
Aug 28 Javascript
JQuery点击行tr实现checkBox选中的简单实例
May 26 Javascript
JS简单实现点击复制链接的方法
Aug 03 Javascript
使用electron将vue-cli项目打包成exe的方法
Sep 29 Javascript
ES6基础之解构赋值(destructuring assignment)
Feb 21 Javascript
关于vue项目中搜索节流的实现代码
Sep 17 Javascript
如何配置vue.config.js 处理static文件夹下的静态文件
Jun 19 Javascript
JS使用Chrome浏览器实现调试线上代码
Jul 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图片加水印原理(超简单的实例代码)
2013/01/18 PHP
php导出word格式数据的代码实例
2013/11/25 PHP
php使用iconv中文截断问题的解决方法
2015/02/11 PHP
php实现的xml操作类
2016/01/15 PHP
Laravel如何使用Redis共享Session
2018/02/23 PHP
浅谈PHP中pack、unpack的详细用法
2018/03/12 PHP
详解PHP 7.4 中数组延展操作符语法知识点
2019/07/19 PHP
jQuery快速上手:写jQuery与直接写JS的区别详细解析
2013/08/26 Javascript
使用script的src实现跨域和类似ajax效果
2014/11/10 Javascript
jQuery使用empty()方法删除元素及其所有子元素的方法
2015/03/26 Javascript
JS实现方向键切换输入框焦点的方法
2015/08/19 Javascript
配置Grunt的Task时通配符支持和动态生成文件名问题
2015/09/06 Javascript
AngularJS中实现用户访问的身份认证和表单验证功能
2016/04/21 Javascript
HTML5 实现的一个俄罗斯方块实例代码
2016/09/19 Javascript
通过npm或yarn自动生成vue组件的方法示例
2019/02/12 Javascript
详解微信小程序中var、let、const用法与区别
2020/01/11 Javascript
python下调用pytesseract识别某网站验证码的实现方法
2016/06/06 Python
Pyinstaller打包.py生成.exe的方法和报错总结
2019/04/02 Python
Python目录和文件处理总结详解
2019/09/02 Python
Python : turtle色彩控制实例详解
2020/01/19 Python
python tkinter GUI绘制,以及点击更新显示图片代码
2020/03/14 Python
Python命名空间namespace及作用域原理解析
2020/06/05 Python
python 模拟登录B站的示例代码
2020/12/15 Python
使用Python下载抖音各大V视频的思路详解
2021/02/06 Python
h5网页水印SDK的实现代码示例
2019/02/19 HTML / CSS
建筑设计所实习生自我鉴定
2013/09/25 职场文书
应届毕业生自我评价分享
2013/12/15 职场文书
小学开学寄语
2014/01/19 职场文书
护士辞职信模板
2014/01/20 职场文书
旷课检讨书3000字
2014/02/04 职场文书
电子商务求职信
2014/06/15 职场文书
房产协议书范本
2014/10/18 职场文书
2015年业务工作总结范文
2015/04/10 职场文书
2016大学生优秀志愿者事迹材料
2016/02/25 职场文书
python处理json数据文件
2022/04/11 Python
BCL经典机 SONY ICF-5900W电路分析
2022/04/24 无线电