使用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 相关文章推荐
js no-repeat写法 背景不重复
Mar 18 Javascript
初识javascript 文档碎片
Jul 13 Javascript
jquery实现树形菜单完整代码
Dec 29 Javascript
jQuery实现背景弹性滚动的导航效果
Jun 01 Javascript
Bootstrap学习笔记之css组件(3)
Jun 07 Javascript
Js调用Java方法并互相传参的简单实例
Aug 11 Javascript
vue实现页面加载动画效果
Sep 19 Javascript
vue-cli中的webpack配置详解
Sep 25 Javascript
Vue+Flask实现简单的登录验证跳转的示例代码
Jan 13 Javascript
详解JSON.stringify()的5个秘密特性
May 26 Javascript
vue 实现上传组件
May 31 Vue.js
Vue 打包后相对路径的引用问题
Jun 05 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获取ip的三个属性区别介绍(HTTP_X_FORWARDED_FOR,HTTP_VIA,REMOTE_ADDR)
2012/09/23 PHP
PHP实现数据分页显示的简单实例
2016/05/26 PHP
php reset() 函数指针指向数组中的第一个元素并输出实例代码
2016/11/21 PHP
PHP基于imagick扩展实现合成图片的两种方法【附imagick扩展下载】
2017/11/14 PHP
php-fpm.conf配置文件中文说明详解及重要参数说明
2018/10/10 PHP
原生js操作checkbox用document.getElementById实现
2013/10/12 Javascript
jquery给图片添加鼠标经过时的边框效果
2013/11/12 Javascript
jquery实现兼容IE8的异步上传文件
2015/06/15 Javascript
jQuery编程中的一些核心方法简介
2015/08/14 Javascript
JS实现点击表头表格自动排序(含数字、字符串、日期)
2017/01/22 Javascript
详解Vue中添加过渡效果
2017/03/20 Javascript
vue中引用阿里字体图标的方法
2018/02/10 Javascript
微信小程序实现自上而下字幕滚动
2018/07/14 Javascript
详解vue组件之间的通信
2020/08/30 Javascript
Python中装饰器的一个妙用
2015/02/08 Python
python实现数据写入excel表格
2018/03/25 Python
python打印9宫格、25宫格等奇数格 满足横竖斜相加和相等
2019/07/19 Python
Python @property使用方法解析
2019/09/17 Python
使用python获取邮箱邮件的设置方法
2019/09/20 Python
python上selenium的弹框操作实现
2020/07/13 Python
CSS3制作翻转效果_动力节点Java学院整理
2017/07/11 HTML / CSS
CSS3制作漂亮的照片墙的实现代码
2016/06/08 HTML / CSS
世界上最大的在线学习和教学市场:Udemy
2017/11/08 全球购物
Zalando Lounge瑞士:时尚与生活方式购物俱乐部
2020/03/12 全球购物
药剂学专业应届生自荐信
2013/09/29 职场文书
毕业生应聘幼儿园的自荐信
2013/11/20 职场文书
个人求职信范例
2014/01/29 职场文书
总经理岗位职责
2015/02/04 职场文书
武侯祠导游词
2015/02/04 职场文书
2015年店长个人工作总结
2015/10/23 职场文书
关于感恩老师的古诗句
2019/08/20 职场文书
CSS filter 有什么神奇用途
2021/05/25 HTML / CSS
vue-cli4.5.x快速搭建项目
2021/05/30 Vue.js
解决SpringBoot跨域的三种方式
2021/06/26 Java/Android
用python基于appium模块开发一个自动收取能量的小助手
2021/09/25 Python
Spring Boot项目如何优雅实现Excel导入与导出功能
2022/06/10 Java/Android