Question

我有一个全选复选框，后跟各个复选框，对应于来自数据库的每条记录。如何实现一个javascript函数，以便当一个人选中Select all时，所有复选框都会被选中，反之亦然。

Answer 1

首先给你的select all复选框说“selectall”，并给所有其他复选框一个类作为allcheck并尝试使用这段代码。

  $("#selectall").click(function() {
    if (!$(this).is(':checked'))
    {
        $('.allcheck').each(function(){
            $(this).prop("checked", false);
        });
    }
    else
    {

        $('.allcheck').each(function(){
            $(this).prop("checked", true);
        });
    }


});

当用户取消选中该框时，所有内容都应取消选中，我想这也是预期的功能

注意： - 假设您使用的是jquery

，我已经给出了这个答案

Answer 2

试试这个：

function checkAll(id) {
    var checkboxCollection = document.getElementById('<%= chkint.ClientID %>').getElementsByTagName('input');
    for (var i = 0; i < checkboxCollection.length; i++) {
        if (checkboxCollection[i].type.toString().toLowerCase() == "checkbox") {
            checkboxCollection[i].checked = id.checked;
        }
    }
}

function select() {
    var count = 0;
    var chkSelectAll = document.getElementById('<%= selectall.ClientID %>');
    var chkList = document.getElementById('<%= chkint.ClientID %>').getElementsByTagName("input");
    for (var i = 0; i < chkList.length; i++) {
        if (chkList[i].checked == true) {
            count++;
        }
    }
    if (count == chkList.length)
        chkSelectAll.checked = true;
    else 
        chkSelectAll.checked = false;        
}

在此代码中，chkint是Checkboxlist的ID，selectall是selectall复选框的ID。

Answer 3

与Aravind类似，使用jQuery，您可以将所有复选框分组到容器中并为其指定ID，并为SelectAll复选框提供ID。在代码很简单之后，请参阅here for fiddle：

$("#selectall").click(function() {
    if ($(this).is(':checked'))
        $("#selectallcontainer :checkbox").not(this).attr('checked', true);
    else
        $("#selectallcontainer :checkbox").not(this).attr('checked', false);
});

Answer 4

这是一个纯粹的JavaScript解决方案：

jsFiddle here

只需将该功能附加到“全选”复选框的onClick事件中，然后将其余选项包装在div中，如下所示：

<script>
    function checkAll() {
        var checkbox_options = document.getElementById("checkbox_options");
        var checkbox_all = document.getElementById("checkbox_all");

        var checkboxes = checkbox_options.getElementsByTagName("input");        
        for (i = 0; i < checkboxes.length; i++) {
            checkboxes[i].checked = checkbox_all.checked;
        }
    }
</script>

<label><input id="checkbox_all" type="checkbox" onclick="checkAll()" />Select All</label><br />
<div id="checkbox_options">
    <label><input type="checkbox" />CheckBox1</label><br />
    <label><input type="checkbox" />CheckBox2</label><br />
    <label><input type="checkbox" />CheckBox3</label><br />
</div>

选择经典asp中的所有复选框功能

4 个答案: