• 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

  • 相关阅读:
    Handle类与线程
    android中ProgressBar和ListView
    RadioGroup、RadioButton、CheckBox、Toast用法
    Android开发中的menu菜单
    多个Activity相互调用和Intent
    ubuntu下安装h2数据库
    window下eclipse安装python插件
    centos7安装JDK1.8
    ubuntu设置root权限默认密码
    Linux给用户添加sudo权限
  • 原文地址:https://www.cnblogs.com/sdya/p/7472071.html
Copyright © 2020-2023  润新知