JQuery之Attr()与Prop()方法

Posted 2020-09-26 千千寰宇

一、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="#">王晓兵</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方法均会失效。