Jquery 1.9 Checkbox 选中问题

Jquery 1.9版本对CheckBox操作有更新,在我们实际应用中多用  $('#checkbox').attr('checked',true)执行选中操作,但是测试时会发现在部分浏览器(ie10\firefox\chrome)中,只有第一次是能够生效的,之后就没有反应啦,查了一下才知道新版本有替代方法:prop,例如下面全选的例子

<input type="checkbox" class="check-all">全选<br/>
<input class="check-one check" type="checkbox" value="1"/>1
<input class="check-one check" type="checkbox" value="2"/>2
<input class="check-one check" type="checkbox" value="3"/>3
<input class="check-one check" type="checkbox" value="4"/>4
<input class="check-one check" type="checkbox" value="5"/>5
        <script type="text/javascript">
            $(function () {
                $("input.check-all").click(function () {
                    $("input.check-one").prop("checked", $(this).is(":checked"));
                });

                $("input.check-one").click(function () {
                    var allChecked = true;
                    if ($(this).is(":checked")==false && $("input.check-all").is(":checked"))
                        allChecked = false;
                    else 
                    {
                        $("input.check-one").each(function (n, v) {
                            if (!$(v).is(":checked"))
                            {
                                allChecked = false;
                                return false;//break
                            }
                        });
                    }
                    $("input.check-all").prop("checked", allChecked);
                });
            });           
</script>

 那么attr和prop具体有什么区别呢:

  • 对于HTML元素本身就带有的固有属性,在处理时,使用prop方法。
  • 对于HTML元素我们自己自定义的DOM属性,在处理时,使用attr方法。

也就是说W3C标准里包含的属性都建议用prop,其他的才用attr

相关推荐