使用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实现禁止输入中文或英文的例子
Dec 09 Javascript
一个php+js实时显示时间问题
Oct 12 Javascript
如何处理JSON中的特殊字符
Nov 30 Javascript
vue-router 导航钩子的具体使用方法
Aug 31 Javascript
浅谈React + Webpack 构建打包优化
Jan 23 Javascript
Vue 获取数组键名的方法
Jun 21 Javascript
vue 项目地址去掉 #的方法
Oct 20 Javascript
vue+element模态框中新增模态框和删除功能
Jun 11 Javascript
浅谈监听单选框radio改变事件(和layui中单选按钮改变事件)
Sep 10 Javascript
Vue中使用matomo进行访问流量统计的实现
Nov 05 Javascript
JS浏览器BOM常见操作实例详解
Apr 27 Javascript
vue 虚拟DOM的原理
Oct 03 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
Uncaught exception com_exception with message Failed to create COM object
2012/01/11 PHP
PHP7中I/O模型内核剖析详解
2019/04/14 PHP
JTrackBar水平拖动效果
2007/07/15 Javascript
Knockout text绑定DOM的使用方法
2013/11/15 Javascript
JS小功能(列表页面隔行变色)简单实现
2013/11/28 Javascript
js控制table合并具体实现
2014/02/20 Javascript
js实现的点击div区域外隐藏div区域
2014/06/30 Javascript
javascript判断并获取注册表中可信任站点的方法
2015/06/01 Javascript
jQuery实现的分子运动小球碰撞效果
2016/01/27 Javascript
JavaScript实现同一个页面打开多张图片
2016/12/29 Javascript
angularjs中回车键触发某一事件的方法
2017/04/24 Javascript
详解让sublime text3支持Vue语法高亮显示的示例
2017/09/29 Javascript
vue router动态路由下让每个子路由都是独立组件的解决方案
2018/04/24 Javascript
vue监听对象及对象属性问题
2018/08/20 Javascript
小程序日历控件使用方法详解
2018/12/29 Javascript
用js编写留言板
2020/03/17 Javascript
基于脚手架创建Vue项目实现步骤详解
2020/08/03 Javascript
[01:10]DOTA2次级职业联赛 - EP战队宣传片
2014/12/01 DOTA
[13:56]DAC2018 4.5SOLO赛决赛 MidOne vs Paparazi第一场
2018/04/06 DOTA
Python编程之列表操作实例详解【创建、使用、更新、删除】
2017/07/22 Python
numpy排序与集合运算用法示例
2017/12/15 Python
详解pyqt5 动画在QThread线程中无法运行问题
2018/05/05 Python
Python 中导入csv数据的三种方法
2018/11/01 Python
python开启debug模式的方法
2019/06/27 Python
如何使用python操作vmware
2019/07/27 Python
Python使用Beautiful Soup爬取豆瓣音乐排行榜过程解析
2019/08/15 Python
PYTHON EVAL的用法及注意事项解析
2019/09/06 Python
python设置表格边框的具体方法
2020/07/17 Python
Quiksilver荷兰官方网站:冲浪和滑雪板
2019/11/16 全球购物
告诉你怎样写创业计划书
2014/01/27 职场文书
安全教育实施方案
2014/03/02 职场文书
合伙经营协议书范本(通用版)
2014/12/03 职场文书
维稳工作承诺书
2015/01/20 职场文书
党员证明模板
2015/06/19 职场文书
班主任工作总结范文
2015/08/13 职场文书
超外差式晶体管收音机的组装与统调
2021/04/22 无线电