编程 Javascript

使用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选中后再次选中失效的问题就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持三水点靠木。

使用prop解决一个checkbox选中后再次选中失效的问题

- Author -

jingxian

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

javascript contains和compareDocumentPosition 方法来确定是否HTML节点间的关系

Feb 04 Javascript

javascript实现避免页面按钮重复提交

Jan 08 Javascript

JS弹出可拖拽可关闭的div层完整实例

Feb 13 Javascript

javascript实现table选中的行以指定颜色高亮显示的方法

May 13 Javascript

JavaScript获取客户端IP的方法(新方法)

Mar 11 Javascript

JS 实现导航菜单中的二级下拉菜单的几种方式

Oct 31 Javascript

jQuery制作图片旋转效果

Feb 02 Javascript

vuex 使用文档小结篇

Jan 11 Javascript

JS实现table表格内针对某列内容进行即时搜索筛选功能

May 11 Javascript

记一次Vue.js混入mixin的使用(分权限管理页面)

Apr 17 Javascript

Node.js操作MongoDB数据库实例分析

Jan 19 Javascript

JS实现单张或多张图片持续无缝滚动的示例代码

May 10 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