zoukankan      html  css  js  c++  java
  • attr全选第三次失效

    一功能checkbox时隐时现,比如第一次打开有勾选,第n次打开可能就不选了。

    经过偶层层抽次剥茧(da da jiang you),终于知道了原因:attr()在二次选中勾选框时,失效。

    比如,如下HTML页面,一点【选中】、二点【取消选中】、三点【选中】,瞧,不行了呗。

    <!doctype html>
    <html lang="en">
    <head>
      <meta charset="utf-8">
      <title>prop demo</title>
      <style>
      img {
        padding: 10px;
      }
      div {
        color: red;
        font-size: 24px;
      }
      </style>
      <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
    </head>
    <body>
     
      <input type="checkbox" checked="checked">
      <input type="checkbox">
      <input type="checkbox">
      <input type="checkbox" checked="checked">
     
    <script>
    $( "input[type='checkbox']" ).prop( "checked", function( i, val ) {
      return !val;
    });
    </script>
     
    </body>
    </html>

    解决方案,是使用prop()替换attr()方法(在Jquery1.6以上),如下代码:

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>Attr checked</title>
    <script type="text/javascript" src="./js/jquery-1.11.2.js"></script>
    <script type="text/javascript">
        function switchChecked(flag) {
            $("input[type='checkbox']").prop('checked', flag);
        }
    </script>
    </head>
    <body>
        <input type="checkbox" />
        <input type="button" onclick="switchChecked(true)" value="选中">
        <input type="button" onclick="switchChecked(false)" value="取消选中">
    </body>
    </html>

    关于官方文档,见:http://api.jquery.com/attr/

    或者http://api.jquery.com/prop/

    转自:http://www.cnblogs.com/nick-huang/p/4436421.html

  • 相关阅读:
    vue 组件轮播联动
    Echarts 解决饼图文字过长重叠的问题
    Echarts 背景渐变柱状图
    vue 组件间数据传递
    vue webpack build 打包过滤console.log()日志
    自定义字段排序
    vue 路由嵌套高亮问题
    微信小程序验证码获取倒计时
    解决小程序里面的图片之间有空隙的问题???
    axios使用
  • 原文地址:https://www.cnblogs.com/sdya/p/7472071.html
Copyright © 2011-2022 走看看