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

  • 相关阅读:
    福大软工 · 第八次作业(课堂实战)- 项目UML设计(团队)
    第六次作业
    福大软工1816 · 第五次作业
    福大软工1816 · 第四次作业
    福大软工1816 · 第三次作业
    福大软工1816 · 第二次作业
    软工实践-团队现场编程
    qwe
    软工冲刺-Alpha 冲刺 (3/10)
    软工时间-Alpha 冲刺 (2/10)
  • 原文地址:https://www.cnblogs.com/sdya/p/7472071.html
Copyright © 2011-2022 走看看