使用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 函数使用说明
Apr 07 Javascript
一个JavaScript处理textarea中的字符成每一行实例
Sep 22 Javascript
理解javascript中的Function.prototype.bind的方法
Feb 03 Javascript
使用 jQuery 实现表单验证功能
Jul 05 jQuery
vue实现某元素吸顶或固定位置显示(监听滚动事件)
Dec 13 Javascript
vue-router 组件复用问题详解
Jan 22 Javascript
vue打包使用Nginx代理解决跨域问题
Aug 27 Javascript
浅谈关于iview表单验证的问题
Sep 29 Javascript
vue-cli安装使用流程步骤详解
Nov 08 Javascript
React父子组件间的传值的方法
Nov 13 Javascript
highCharts提示框中显示当前时间的方法
Jan 18 Javascript
Vue动态生成el-checkbox点击无法赋值的解决方法
Feb 21 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
可快速识别放射性物质-国外大神教你diy一个开放式辐射探测器
2020/03/12 无线电
PHP中使用smarty生成静态文件的例子
2014/04/24 PHP
JavaScript验证图片类型(扩展名)的函数分享
2014/05/05 Javascript
Jquery跳到页面指定位置的方法
2014/05/12 Javascript
JavaScript实现动态创建CSS样式规则方案
2014/09/06 Javascript
jQuery中:nth-child选择器用法实例
2014/12/31 Javascript
jquery获取多个checkbox的值异步提交给php
2015/07/07 Javascript
jQuery使用$.ajax提交表单完整实例
2015/12/11 Javascript
原生js实现弹出层登录拖拽功能
2016/12/05 Javascript
vue2.0设置proxyTable使用axios进行跨域请求的方法
2017/10/19 Javascript
vue中本地静态图片路径写法
2018/03/06 Javascript
详解如何在webpack中做预渲染降低首屏空白时间
2018/08/22 Javascript
laydate如何根据开始时间或者结束时间限制范围
2018/11/15 Javascript
Vue axios全局拦截 get请求、post请求、配置请求的实例代码
2018/11/28 Javascript
python中使用sys模板和logging模块获取行号和函数名的方法
2014/04/15 Python
Python实现简单状态框架的方法
2015/03/19 Python
python基于隐马尔可夫模型实现中文拼音输入
2016/04/01 Python
浅谈编码,解码,乱码的问题
2016/12/30 Python
python判断计算机是否有网络连接的实例
2018/12/15 Python
python中logging模块的一些简单用法的使用
2019/02/22 Python
python实现月食效果实例代码
2019/06/18 Python
利用python-pypcap抓取带VLAN标签的数据包方法
2019/07/23 Python
使用 Supervisor 监控 Python3 进程方式
2019/12/05 Python
使用opencv将视频帧转成图片输出
2019/12/10 Python
浅谈tensorflow中dataset.shuffle和dataset.batch dataset.repeat注意点
2020/06/08 Python
html5图片上传预览示例分享
2014/04/14 HTML / CSS
html5视频常用API接口的实战示例
2020/03/20 HTML / CSS
英国50岁以上人群的交友网站:Ourtime
2018/03/28 全球购物
英国天然抗衰老护肤品品牌:Nakin Skin Care
2019/04/16 全球购物
CheapTickets泰国:廉价航班,查看促销价格并预订机票
2019/12/28 全球购物
交通安全寄语大全
2014/04/08 职场文书
司法建议书范文
2014/05/13 职场文书
增员口号大全
2014/06/18 职场文书
2015年学校党支部工作总结
2015/04/01 职场文书
2015年度护士个人工作总结
2015/04/09 职场文书
MySQL 外连接语法之 OUTER JOIN
2022/04/09 MySQL