使用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 相关文章推荐
Ext javascript建立超链接,进行事件处理的实现方法
Mar 22 Javascript
url 编码 js url传参中文乱码解决方案
Apr 11 Javascript
A标签触发onclick事件而不跳转的多种解决方法
Jun 27 Javascript
中止javascript执行的方法
Feb 14 Javascript
js中的cookie的读写操作示例详解
Apr 17 Javascript
JQuery操作元素的css样式
Mar 09 Javascript
Javascript中的arguments与重载介绍
Mar 15 Javascript
理解JavaScript中Promise的使用
Jan 18 Javascript
基于js实现checkbox批量选中操作
Nov 22 Javascript
js实现消息滚动效果
Jan 18 Javascript
JS库之Particles.js中文开发手册及参数详解
Sep 13 Javascript
为什么使用koa2搭建微信第三方公众平台的原因
May 16 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
使用Apache的htaccess防止图片被盗链的解决方法
2013/04/27 PHP
php一行代码获取文件后缀名实例分析
2014/11/12 PHP
PHP CURL 内存泄露问题解决方法
2015/02/12 PHP
PHP多态代码实例
2015/06/26 PHP
CodeIgniter与PHP5.6的兼容问题
2015/07/16 PHP
JS JavaScript获取Url参数,src属性参数
2021/03/09 Javascript
Javascript写了一个清除“logo1_.exe”的杀毒工具(可扫描目录)
2007/02/09 Javascript
javascript实现的鼠标链接提示效果生成器代码
2007/06/28 Javascript
javascript 浏览器判断 绑定事件 arguments 转换数组 数组遍历
2009/07/06 Javascript
让Firefox支持event对象实现代码
2009/11/07 Javascript
jQuery固定浮动侧边栏实现思路及代码
2014/09/28 Javascript
js实现添加可信站点、修改activex安全设置,禁用弹出窗口阻止程序
2016/08/17 Javascript
Angular2学习教程之TemplateRef和ViewContainerRef详解
2017/05/25 Javascript
w3c编程挑战_初级脚本算法实战篇
2017/06/23 Javascript
JavaScript实现一个带AI的井字棋游戏源码
2018/05/21 Javascript
基于游标的分页接口实现代码示例
2018/11/12 Javascript
JS实现网页端猜数字小游戏
2020/03/06 Javascript
微信小程序实现选择地址省市区三级联动
2020/06/21 Javascript
python脚本实现分析dns日志并对受访域名排行
2014/09/18 Python
Python计算已经过去多少个周末的方法
2015/07/25 Python
完美解决Python 2.7不能正常使用pip install的问题
2018/06/12 Python
python通过配置文件共享全局变量的实例
2019/01/11 Python
python爬取Ajax动态加载网页过程解析
2019/09/05 Python
Android Q之气泡弹窗的实现示例
2020/06/23 Python
html5文本内容_动力节点Java学院整理
2017/07/11 HTML / CSS
英国最好的温室之家:Greenhouses Direct
2019/07/13 全球购物
安全目标管理责任书
2014/07/25 职场文书
2014党员学习兰辉先进事迹思想汇报
2014/09/17 职场文书
行政执法队伍作风整顿个人剖析材料
2014/10/11 职场文书
2014最新预备党员思想汇报范文:中国梦,我的梦
2014/10/25 职场文书
Nginx Rewrite使用场景及配置方法解析
2021/04/01 Servers
Python基础之进程详解
2021/05/21 Python
MySQL中utf8mb4排序规则示例
2021/08/02 MySQL
B站评分公认最好看的动漫,你的名字评分9.9,第六备受喜欢
2022/03/18 日漫
三星 3nm 芯片将于第二季度开始量产
2022/04/29 数码科技
手把手带你彻底卸载MySQL数据库
2022/06/14 MySQL