jQuery cookbook一书中的代码问题

代码本身很简单，无非就是两个链接：select all和deselect all，分别实现全选所有的checkbox和取消选中的checkbox。但是有一个很奇怪的现象：当先点击select all，再点击deselect all，然后再点击select all的时候，就没法全选所有的checkbox了。通过firebug进行实时查看，的确可以看到对应checkbox被加上了"checked=checked"属性，可是在浏览器中完全看不到被选中的效果。在FF和chrome中均存在这个问题。

<body>
    <fieldset>
        <legend>Reasons to be happy</legend>
        <a class="selectAll" href="#">Select All</a>
        <a class="deselectAll" href="#">Deselect All</a>
        <input name="reasons" id="iwokeup" type="checkbox" value="iwokeup" />
        <label for="iwokeup">I woke up</label>
        <input name="reasons" id="health" type="checkbox" value="health" />
        <label for="health">My health</label>
        <input name="reasons" id="family" type="checkbox" value="family" />
        <label for="family">My family</label>
        <input name="reasons" id="sunshine" type="checkbox" value="sunshine" />
        <label for="sunshine">The sun is shining</label>
    </fieldset>

    <script>
        // find the "Select All" link in a fieldset and list for the click event
        $('fieldset .selectAll').click(function(event){
            event.preventDefault();
            // find all the checkboxes and select them
            $(this).siblings('input:checkbox').attr('checked',true);
        });
        // find the "Deselect All" link in a fieldset and list for the click event
        $('fieldset .deselectAll').click(function(event){
            event.preventDefault();
            // find all the checkboxes and deselect them
            $(this).siblings('input:checkbox').removeAttr('checked');
        });
    </script>
</body>

.prop("checked",'true')

http://stackoverflow.com/questions/5874652/prop-vs-attr

【热门文章】