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

//问题点

初始状态复选框没有全选，

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

赞 (0)

相关推荐

  • jquery中checkbox全选失效的解决方法

    如果你使用jQuery 1.6 ,代码if ( $(elem).attr("checked") ),将获得一个属性(attribute) ,它不改变该复选框被选中和选中.它只是用来存储默认或选中属性的初始值.为了保持向后兼容,.attr() 方法从 jQuery 1.6.1+ 开始除了返回属性值外,还会更新 property 属性,因此 boolean attribute(布尔属性)不需要通过 .prop() 来改变其值.推荐使用上述方法之一,来取得 checked 的值. 使用jQu

  • jQuery checkbox选中问题之prop与attr注意点分析

    jQuery checkbox选中问题之prop与attr注意点分析

    本文实例分析了jQuery checkbox选中问题之prop与attr注意点.分享给大家供大家参考,具体如下: 一个网上很多的例子如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.or

  • JQuery 设置checkbox值二次无效的解决方法

    在此MVC ASP.NET 项目,我利用jquery ajax传输数据给后台controller控制层,返回数据给JQuery数据. 首先必须清除checkbox的选中,因为是ajax的异步操作,是不刷新页面的,所以需要手段充值控件值,使得其为空,不影响下次的拿到数据显示. 言归正传,$("#checkboxID").attr('checked', false);//设置checkbox为不选中状态, $("#checkboxID").attr('checked',

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

    //问题点 初始状态复选框没有全选, 点击全选按钮调用checkAll方法, 实现了全选, 然后点击全不选按钮, 实现了全不选, 然后再次点击全选按钮, 结果却木有全选, 再反复点击木有任何反应. demo: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script

  • 解决try-catch捕获异常信息后Spring事务失效的问题

    一.首先在Spring Boot项目中,手动添加异常方法进行测试 @Transactional(rollbackFor=Exception.class) //表示此方法有异常时触发Spring事务 @Override public CommonResult<User> saveUser(User user) { int insert = baseMapper.insert(user); try { // 添加异常,并进行捕获 int a = 10/0; }catch (Exception e)

  • checkbox 选中一个另一个checkbox也会选中的实现代码

    checkbox 选中一个另一个checkbox也会选中的实现代码

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns='http://www.w3.org/1999/xhtml' xml:lang='en'> <head> <meta http-equiv='content-type' content

  • 解决vue 更改计算属性后select选中值不更改的问题

    先上代码: //... <body> <div id="qwe"> <select v-model="selected"> <option v-for="item in da" :value="item.value">{{item.value}}</option> </select> <span>{{selected}}</span>

  • jquery判断至少有一个checkbox被选中的方法

    本文实例讲述了jquery判断至少有一个checkbox被选中的方法.分享给大家供大家参考.具体实现方法如下: html代码部分: <form> <!-- bunch of checkboxes like: --> <input type="checkbox" ... > <input type="checkbox" ... > <!-- submit button, defaults to disabled -

  • Jquery给当前页或者跳转后页面的导航栏添加选中后样式的实例

    解决方法有两种:一种是直接给当前页面添加特殊样式,当网页刷新或者跳转到下一页后,样式消失:另一种情况是即使刷新页面后样式仍然有效. 直接上代码: 第一种情况: <script type="text/javascript" src="templets/js/jquery.js"></script> <script type="text/javascript"> $(document).ready(function

  • 解决maven update project 后项目jdk变成1.5的问题

    解决maven update project 后项目jdk变成1.5的问题

    一.问题描述 在Eclipse中新建了一个Maven工程, 然后更改JDK版本为1.7, 结果每次使用Maven > Update project的时候JDK版本都恢复成1.5. 二.原因分析 Maven官方文档有如下描述: 编译器插件用来编译项目的源文件.从3.0版本开始, 用来编译Java源文件的默认编译器是javax.tools.JavaCompiler (如果你是用的是java 1.6) . 如果你想强制性的让插件使用javac,你必须配置插件选项 forceJavacCompilerU

  • vue-cli 默认路由再子路由选中下的选中状态问题及解决代码

    vue-cli是Vue.js官方脚手架命令行工具,我们可以用它快速搭建Vue.js项目,vue-cli最主要的功能就是初始化项目,既可以使用官方模板,也可以使用自定义模板生成项目,而且从2.8.0版本开始,vue-cli新增了build命令,能让你零配置启动一个Vue.js应用. 因项目需求,需要在默认路由下面的两个子路由进行切换,当开始以为不就是路由切换?so easy!就看一下遇到的问题吧! {path: '/',component: resolve => require(['@/compo

  • 解决Echarts 显示隐藏后宽度高度变小的问题

    Echarts 是现在程序员做图表用到比较多的一种技术,前段时间,我就用了一下Echarts,我原本是将饼图先隐藏,然后点击按钮让它再显示出来,但是再显示时,饼状图出现了问题,它变得特别小,根本不能用,然后,就此,我找了下原因 原因:Echarts 图表是根据你定义的div 的样式来确定图表的大小,当图表隐藏时,Echarts会找不到div的宽和高,再次显示时它会给自己一个非常小的默认宽高值,所以在隐藏显示后会发现它变得非常非常的小. 解决:将初始化放在click事件里,给一个flag 控制显示

  • 解决tomcat发布工程后,WEB-INF/classes下文件不编译的问题

    解决tomcat发布工程后,WEB-INF/classes下文件不编译的问题

    今天部署项目到tomcat,发布完后,启动tomcat,报class not found: 临时找了个解决方案,由于项目是copy过来的,于是就将原来项目的classes下面编译好的class文件也一并拷过来了:但是治标不治本: 后来在我修改代码的时候,重新发布到tomcat,发现新写的代码还是没有自动编译:classes下面还是没有class文件: 于是找解决方法:我是按照下面操作成功的: 1)在java build path下面删除原来的jre,重新导入jre: 2)删掉所有引用的jar包,

随机推荐