使用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 相关文章推荐
QUnit jQuery的TDD框架
Nov 04 Javascript
用最通俗易懂的代码帮助新手理解javascript闭包 推荐
Mar 01 Javascript
利用javascript判断文件是否存在
Dec 31 Javascript
JQuery打造省市下拉框联动效果
May 18 Javascript
javascript实现根据身份证号读取相关信息
Dec 17 Javascript
js实现的彩色方块飞舞奇幻效果
Jan 27 Javascript
JavaScript简单获取页面图片原始尺寸的方法
Jun 21 Javascript
jQuery监听文件上传实现进度条效果的方法
Oct 16 Javascript
使用 Node.js 模拟滑动拼图验证码操作的示例代码
Nov 02 Javascript
使用Vue自定义指令实现Select组件
May 24 Javascript
微信小程序之swiper滑动面板用法示例
Dec 04 Javascript
精读《Vue3.0 Function API》
May 20 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
paypal即时到账php实现代码
2010/11/28 PHP
PHP include_path设置技巧分享
2011/07/03 PHP
关于PHP结束标签的使用细节探讨及联想
2013/03/04 PHP
PHP实现路由映射到指定控制器
2016/08/13 PHP
laravel unique验证、确认密码confirmed验证以及密码修改验证的方法
2019/10/16 PHP
用于判断用户注册时,密码强度的JS代码
2009/01/01 Javascript
JavaScript去除空格的三种方法(正则/传参函数/trim)
2013/02/06 Javascript
初识Node.js
2014/09/03 Javascript
实现无刷新联动例子汇总
2015/05/20 Javascript
easyui Droppable组件实现放置特效
2015/08/19 Javascript
jquery实现的横向二级导航效果代码
2015/08/26 Javascript
Javascript控制div属性动态变化实例分析
2015/10/08 Javascript
js实现交通灯效果
2017/01/13 Javascript
浅谈webpack打包过程中因为图片的路径导致的问题
2018/02/21 Javascript
karma+webpack搭建vue单元测试环境的方法示例
2018/05/24 Javascript
JavaScript中常用的简洁高级技巧总结
2019/03/10 Javascript
Node.js之删除文件夹(含递归删除)代码实例
2019/09/09 Javascript
webpack proxy 使用(代理的使用)
2020/01/10 Javascript
[04:56]经典回顾:前Ehome 与 前LGD
2015/02/26 DOTA
[06:53]2018DOTA2国际邀请赛寻真——勇于创新的Vici Gaming
2018/08/14 DOTA
Python中声明只包含一个元素的元组数据方法
2014/08/25 Python
python使用htmllib分析网页内容的方法
2015/05/08 Python
Python栈算法的实现与简单应用示例
2017/11/01 Python
Python爬虫获取图片并下载保存至本地的实例
2018/06/01 Python
python+Splinter实现12306抢票功能
2018/09/25 Python
对Python3 goto 语句的使用方法详解
2019/02/16 Python
python导入pandas具体步骤方法
2019/06/23 Python
sklearn+python:线性回归案例
2020/02/24 Python
微信端html5页面调用分享接口示例
2018/03/14 HTML / CSS
《难忘的泼水节》教学反思
2014/02/27 职场文书
经典而简洁的婚礼主持词
2014/03/13 职场文书
小浪底导游词
2015/02/12 职场文书
总经理检讨书范文
2015/02/16 职场文书
拾金不昧通报表扬范文
2015/05/05 职场文书
Go语言 go程释放操作(退出/销毁)
2021/04/30 Golang
OpenCV-Python使用cv2实现傅里叶变换
2021/06/09 Python