使用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 Cookie 直接浏览网站分网址
Dec 08 Javascript
JS Pro-深入面向对象的程序设计之继承的详解
May 07 Javascript
浅析jQuery EasyUI中的tree使用指南
Dec 18 Javascript
JavaScript 基本概念
Jan 20 Javascript
jquery实现实时改变网页字体大小、字体背景色和颜色的方法
Aug 05 Javascript
JavaScript实现下拉菜单的显示和隐藏
Jan 05 Javascript
JQuery的attr 与 val区别
Jun 12 Javascript
JS控制TreeView的结点选择
Nov 11 Javascript
JavaScript编写棋盘覆盖代码详解
Aug 28 Javascript
vue.js表单验证插件(vee-validate)的使用教程详解
May 23 Javascript
react 原生实现头像滚动播放的示例
Apr 21 Javascript
Openlayers实现地图的基本操作
Sep 28 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/06/20 PHP
jQuery EasyUI API 中文文档 - NumberSpinner数值微调器使用介绍
2011/10/21 Javascript
用示例说明filter()与find()的用法以及children()与find()的区别分析
2013/04/26 Javascript
让网页跳转到指定位置的jquery代码非书签
2013/09/06 Javascript
js实现具有高亮显示效果的多级菜单代码
2015/09/01 Javascript
jQuery实用技巧必备(上)
2015/11/02 Javascript
JavaScript中的Array 对象(数组对象)
2016/06/02 Javascript
vue实现可增删查改的成绩单
2016/10/27 Javascript
浅析JavaScript中作用域和作用域链
2016/12/06 Javascript
jquery实现下拉框多选方法介绍
2017/01/03 Javascript
JS实现标签页切换效果
2017/05/04 Javascript
WdatePicker.js时间日期插件的使用方法
2017/07/26 Javascript
Vue-Router实现组件间跳转的三种方法
2017/11/07 Javascript
JS实现多物体运动的方法详解
2018/01/23 Javascript
除Console.log()外更多的Javascript调试命令
2018/01/24 Javascript
javascript前端实现多视频上传
2020/12/13 Javascript
[51:05]DOTA2上海特级锦标赛主赛事日 - 5 败者组决赛Liquid VS EG第一局
2016/03/06 DOTA
使用python实现拉钩网上的FizzBuzzWhizz问题示例
2014/05/05 Python
Python类的多重继承问题深入分析
2014/11/09 Python
python随机取list中的元素方法
2018/04/08 Python
Python实现简单http服务器
2018/04/12 Python
Python3模拟登录操作实例分析
2019/03/12 Python
python使用装饰器作日志处理的方法
2019/07/11 Python
Django admin 实现search_fields精确查询实例
2020/03/30 Python
Python基于httpx模块实现发送请求
2020/07/07 Python
使用CSS3制作倾斜导航条和毛玻璃效果
2017/09/12 HTML / CSS
一款纯css3实现的动画加载导航
2014/10/08 HTML / CSS
一些Unix笔试题和面试题
2012/09/25 面试题
司机岗位职责
2013/11/15 职场文书
班主任新年寄语
2014/04/04 职场文书
党的群众路线教育实践活动总结报告
2014/07/03 职场文书
安全生产工作汇报
2014/10/28 职场文书
2014离婚协议书范文(3篇)
2014/11/29 职场文书
医药公司开票员岗位职责
2015/04/15 职场文书
民事调解书范文
2015/05/20 职场文书
关于springboot配置druid数据源不生效问题(踩坑记)
2021/09/25 Java/Android