首页 > 代码库 > JQuery之Attr()与Prop()方法

JQuery之Attr()与Prop()方法

一、Prop()的由来

  JQuery 1.6开始 新增方法prop()

  prop()解决:表单元素中checked,selected,disabled等属性在方法attr()中可能会出现的不一致问题(属于attr方法之前的bug);

  [引用文献]https://segmentfault.com/a/1190000002680303 

二、BUG重现

<table class="table table-striped " style=" ">
    <thead>
        <th><input type="checkbox" name="" id="select_all_checkbox" onclick="toggle_select_all_records(this.checked)"></th>
        <th style="width: 9% ">病案号</th>
        <th style="width: 9% ">出院日期</th>
        <th style="width: 15% ">姓名</th>
        <th style="width: 50% ">摘要</th>
        <th style="width: 12% ">操作</th>
    </thead>
    <script type="text/javascript">
    var toggle_select_all_records_counts=0;
    function toggle_select_all_records(checked_value){
        alert(checked_value);
        var inputs = $(‘input[type="checkbox"]‘).prop({
            checked: checked_value
        });
        /*
        表单元素不建议使用attr方法,建议使用prop(),语法一致:
        使用attr方法将可能导致中途设置的属性失灵;	
        */
    }
    </script>
    <tbody>
        <tr>
            <td><input type="checkbox" name=""></td>
            <td>2854863</td>
            <td>2017-03-05</td>
            <td>
                <span name="">吴二</span>
                <br>
                <span>主治医师:</span><span><a href="http://www.mamicode.com/#">王晓兵</a>-<span>呼吸科</span></span>
            </td>
            <td style="white-space: normal;text-align: left;text-align: justify;">
诊断:呼吸道感染 神志清 精神软,咽红,扁桃体II度肿大,充血,呼吸平稳25次/分,两肺呼吸音粗,无罗音,心率95/分,律齐,心音有力,无杂音,未及包块
            </td>
            <td><a href="" class="btn btn_view">查看</a></td>
     </tr>  
  </tbody>
</table>
</table> 当选择全选按钮,点击到第三次及其以后,attr方法均会失效。 

JQuery之Attr()与Prop()方法