jquery - 选中和取消选中输入仅对 Jquery 起作用一次

Question

我正在尝试通过单击表头中的一个复选框来选中/取消选中所有复选框。首先单击将属性添加到输入，然后取消选中。它只工作一次。在 Firefox 和 Chrome 上进行测试。А属性不断变化，但这没有显示在页面中。我只在浏览器调试器中看到它。

<table>
    <thead>
        <tr>
            <th><input type="checkbox" /></th>
            <th>#</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td><input type="checkbox" /></td>
            <td>1</td>
        </tr>
        <tr>
            <td><input type="checkbox" /></td>
            <td>2</td>
        </tr>
        <tr>
            <td><input type="checkbox" /></td>
            <td>3</td>
        </tr>
    </tbody>
</table>

<script type="text/javascript">
$(function () {
    $('th input[type="checkbox"]').click(function(){
        if ( $(this).is(':checked') )
            $('td input[type="checkbox"]').attr('checked', 'checked');
        else
            // $('td input[type="checkbox"]').attr('checked', false);
            $('td input[type="checkbox"]').removeAttr('checked');
    })
});
</script>

示例 http://jsfiddle.net/aJhm9/

Answer 1

使用属性而不是属性

$(function () {
    $('th input[type="checkbox"]').click(function(){
        if ( $(this).is(':checked') )
            $('td input[type="checkbox"]').prop('checked', true);
        else
            $('td input[type="checkbox"]').prop('checked', false);
    })
});

http://jsfiddle.net/aJhm9/2/

Answer 2

.attr()仅用于修改元素的默认状态，而不是其活动状态.prop()用于更改元素的活动状态。

Answer 3

使用prop()而不是attr()

 $(function () {
   $('th input[type="checkbox"]').click(function(){
    if ( $(this).is(':checked') )
        $('td input[type="checkbox"]').prop('checked', true);
    else
        $('td input[type="checkbox"]').prop('checked', false);
   })
});

工作小提琴

Answer 4

<script>
    $('#select_all').click(function () {
    $( this ).closest('form').find(':checkbox').prop( 'checked' , this.checked ? true : false );
})
</script>

Answer 5

为什么要使用 jQuery 来完成这么小的任务？只需将表格顶部的主复选框的 ID 设置为唯一名称。然后将特定类添加到表中的所有其他复选框。然后使用以下代码： -

var mainCheckbox = document.getElementById('name_of_ID');

if(window.addEventListener) {
    mainCheckbox.addEventListener('change', togglecheckboxes, false);
} else {
    mainCheckbox.attachEvent('onchange', togglecheckboxes);
}

function togglecheckboxes(){
    var otherCheckboxes = document.getElementsByClassName('name_of_CLASS'); //returns an array
        for(var i = 0; i < otherCheckboxes.length; i++){
            otherCheckboxes[i].checked = mainCheckbox.checked;
        }
}