使用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怎么解析Json字符串(Json格式/Json对象)
Aug 09 Javascript
JavaScript使ifram跨域相互访问及与PHP通信的实例
Mar 03 Javascript
Listloading.js移动端上拉下拉刷新组件
Aug 04 Javascript
通过AngularJS实现图片上传及缩略图展示示例
Jan 03 Javascript
angular和BootStrap3实现购物车功能
Jan 25 Javascript
Angular使用$http.jsonp发送跨站请求的方法
Mar 16 Javascript
JavaScript输出所选择起始与结束日期的方法
Jul 12 Javascript
基于node.js express mvc轻量级框架实践
Sep 14 Javascript
angularJs select绑定的model取不到值的解决方法
Oct 08 Javascript
layer 刷新某个页面的实现方法
Sep 05 Javascript
vue+导航锚点联动-滚动监听和点击平滑滚动跳转实例
Nov 13 Javascript
浅析vue中的nextTick
Dec 28 Vue.js
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新建文件自动编号的思路与实现
2011/06/27 PHP
大家在抢红包,程序员在研究红包算法
2015/08/31 PHP
PHP中addslashes与mysql_escape_string的区别分析
2016/04/25 PHP
浅谈thinkphp5 instance 的简单实现
2017/07/30 PHP
Thinkphp 框架基础之入口文件功能、定义与用法分析
2020/04/27 PHP
PHP rsa加密解密算法原理解析
2020/12/09 PHP
jquery与google map api结合使用 控件,监听器
2010/03/04 Javascript
DOM节点深度克隆函数cloneNode()用法实例
2015/01/12 Javascript
js实现用户离开页面前提示是否离开此页面的方法(包括浏览器按钮事件)
2015/07/18 Javascript
Jquery 全选反选实例代码
2015/11/19 Javascript
jQuery实现获取绑定自定义事件元素的方法
2015/12/02 Javascript
实现React单页应用的方法详解
2016/08/02 Javascript
jQuery插件zTree实现的多选树效果示例
2017/03/08 Javascript
微信小程序 配置顶部导航条标题颜色的实现方法
2017/09/20 Javascript
五步轻松实现zTree的使用
2017/11/01 Javascript
iview同时验证多个表单问题总结
2018/09/29 Javascript
javascript中函数的写法实例代码详解
2018/10/28 Javascript
仿ElementUI实现一个Form表单的实现代码
2019/04/23 Javascript
微信小程序 简易计算器实现代码实例
2019/09/02 Javascript
js实现列表向上无限滚动
2020/01/13 Javascript
React中获取数据的3种方法及优缺点
2020/02/18 Javascript
vue项目打包后提交到git上为什么没有dist这个文件的解决方法
2020/09/16 Javascript
使用Python对IP进行转换的一些操作技巧小结
2015/11/09 Python
Python之reload流程实例代码解析
2018/01/29 Python
python增加图像对比度的方法
2019/07/12 Python
Python PyPDF2模块安装使用解析
2020/01/19 Python
numpy中生成随机数的几种常用函数(小结)
2020/08/18 Python
html5使用canvas绘制一张图片
2014/12/15 HTML / CSS
岗位职责的定义
2013/11/10 职场文书
计算机软件个人的自荐信范文
2013/12/01 职场文书
历史专业学生的自我评价
2014/02/28 职场文书
2014年客房部工作总结
2014/11/22 职场文书
委托证明范本
2014/11/25 职场文书
2014年科室工作总结范文
2014/12/19 职场文书
部门优秀员工推荐信
2015/03/24 职场文书
Redis基本数据类型Set常用操作命令
2022/06/01 Redis