1

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

4

4 回答 4

1

尝试这个：

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是 Checkboxlistselectall的 ID，是 selectall 复选框的 ID。

于 2012-09-12T05:31:35.970 回答
1

首先为您的全选复选框提供一个 ID，例如“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，我已经给出了这个答案

于 2012-09-12T05:27:41.790 回答
0

Here is a pure javascript solution:

jsFiddle here.

Simply attach the function to the onClick event of your 'Select All' checkbox and wrap the rest of your options in a div like so:

<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>
于 2012-09-12T08:54:32.380 回答
0

与 Aravind 类似，使用 jQuery，您可以将所有复选框分组到一个容器中，并为其指定一个 ID，并为您的 SelectAll 复选框指定一个 ID。在该代码很简单之后，请参见此处的小提琴：

$("#selectall").click(function() {
    if ($(this).is(':checked'))
        $("#selectallcontainer :checkbox").not(this).attr('checked', true);
    else
        $("#selectallcontainer :checkbox").not(this).attr('checked', false);
});​
于 2012-09-12T08:02:16.203 回答