Question

我正在尝试通过单击表头中的一个复选框来选中/取消选中所有复选框。首先单击add attributes to inputs，然后取消选中。它只工作一次。在Firefox和Chrome上测试。 Аttributes不断变化，但这不会显示在页面中。我只在浏览器调试器中看到它。

<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);
   })
});

working fiddle

Answer 4

为什么要将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;
        }
}

Answer 5

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

使用Jquery检查和取消选中输入只能工作一次

5 个答案: