使用 JavaScript 的 CheckBoxList 项目

Question

我有一个包含几个项目和一个所有选项的清单。用户可以选择全部，我希望这会选中所有选项，如果他们取消选中所有选项，它将取消选中所有选项。

我用下面的代码完成了这一点。

<script language="javascript" type="text/javascript">
    function CheckBoxListSelect(cbControl) //, state)
    {
        var chkBoxList = document.getElementById(cbControl);
        var chkBoxCount= chkBoxList.getElementsByTagName("input");

        alert(chkBoxCount[0].checked);

        for(var i=0;i<chkBoxCount.length;i++)
        {   
            chkBoxCount[i].checked = chkBoxCount[0].checked //state;
        }

        return false; 
    }
</script>

cblAffiliation.Attributes.Add("onclick", "javascript: CheckBoxListSelect ('" & cblAffiliation.ClientID & "');")

问题是，如果我选择任何一个框，它会循环遍历，然后将它们设置为所有选项。我无法找出解决此问题的最佳方法。

我想避免使用复选框列表旁边的复选框，然后我必须使其与复选框列表对齐。

Answer 1

只需检查单击的框是否为全部选项。如果是，那就继续更换其余的盒子。如果不是，请检查所有选项以查看是否全部选中，以便您可以更新“全部”复选框。

---

编辑

您可能想要使用 onChange，而不是 onClick，onClick 可能会在给定复选框上的值更改之前被调用。

---

代码未检查，请原谅语法问题。

<script language="javascript" type="text/javascript">
    function CheckBoxListSelect(cbControl) //, state)
    {
        var chkBoxList = document.getElementById(cbControl);
        var chkBoxCount= chkBoxList.getElementsByTagName("input");
        var clicked = this;

        alert(chkBoxCount[0].checked ? 'All is Checked' : 'All is not Checked');
        alert(clicked == chkBoxCount[0] ? 'You Clicked All' : 'You Didn't click All');

        var AllChecked = true; // Check the all box if all the options are now checked

        for(var i = 1;i < chkBoxCount.length; i++)
        {   
            if(clicked == chkBoxCount[0]) { // Was the 'All' checkbox clicked?
                chkBoxCount[i].checked = chkBoxCount[0].checked; // Set if so
            }
            AllChecked &= chkBoxCount[i].checked; // AllChecked is anded with the current box
        }

        chkBoxCount[0].checked = AllChecked;

        return false; 
    }
</script>

cblAffiliation.Attributes.Add("onchange", "javascript: CheckBoxListSelect ('" & cblAffiliation.ClientID & "');")

Answer 2

我认为这段代码会对您有所帮助。

<script type="text/javascript">
function check(checkbox) 
{
 var cbl = document.getElementById('<%=CheckBoxList2.ClientID %>').getElementsByTagName("input");
 for(i = 0; i < cbl.length;i++) cbl[i].checked = checkbox.checked;
}
</script>

 <asp:CheckBox ID="CheckBox1" runat="server" onclick="check(this)" />
 <asp:CheckBoxList ID="CheckBoxList2" runat="server">
    <asp:ListItem>C1</asp:ListItem>
    <asp:ListItem>C2</asp:ListItem>
  </asp:CheckBoxList>

Answer 3

 <asp:CheckBox ID="checkAll" runat="server" Text="Select/Unselect" onclick="CheckAll();" />
    <asp:CheckBoxList ID="chkTest" runat="server" onclick="ClearAll();">
        <asp:ListItem Text="Test 1" Value="0"></asp:ListItem>
        <asp:ListItem Text="Test 2" Value="1"></asp:ListItem>
        <asp:ListItem Text="Test 3" Value="2"></asp:ListItem>
            </asp:CheckBoxList>
<script type="text/javascript">

function CheckAll() {
    var intIndex = 0;
    var rowCount=document.getElementById('chkTest').getElementsByTagName("input").length;
    for (intIndex = 0; intIndex < rowCount; intIndex++) 
    {
        if (document.getElementById('checkAll').checked == true)
        {
            if (document.getElementById("chkTest" + "_" + intIndex)) 
            {
                if (document.getElementById("chkTest" + "_" + intIndex).disabled != true)
                    document.getElementById("chkTest" + "_" + intIndex).checked = true;
            }
         }
         else
         {
             if (document.getElementById("chkTest" + "_" + intIndex)) 
                {
                    if (document.getElementById("chkTest" + "_" + intIndex).disabled != true)
                        document.getElementById("chkTest" + "_" + intIndex).checked = false;
                }
         }
    }
 } 

function ClearAll(){
    var intIndex = 0;
    var flag = 0;
    var rowCount=document.getElementById('chkTest').getElementsByTagName("input").length;
    for (intIndex = 0; intIndex < rowCount; intIndex++) 
    {
            if (document.getElementById("chkTest" + "_" + intIndex)) 
            {
                    if(document.getElementById("chkTest" + "_" + intIndex).checked == true)
                    {
                        flag=1;
                    }
                    else
                    {
                        flag=0;
                        break;
                    }
            }
    }
    if(flag==0)
         document.getElementById('checkAll').checked = false;
    else
         document.getElementById('checkAll').checked = true;

}
</script>

Answer 4

 function checkparent(id) {
            var parentid = id;
            var Control = document.getElementById(parentid).getElementsByTagName("input");
            if (parentid.indexOf("List") != -1) {
                parentid = parentid.replace("List", "");
            }
            if (eval(Control).length > 0) {
                if (eval(Control)) {

                    for (var i = 0; i < Control.length; i++) {
                        checkParent = false;
                        if (Control[i].checked == true) {
                            checkChild = true;
                        }
                        else {

                            checkChild = false;
                            break;
                        }
                    }
                }
            }
            if (checkParent == true && document.getElementById(parentid).checked == false) {
                document.getElementById(parentid).checked = false;
                checkParent = true;
            }
            else if (checkParent == true && document.getElementById(parentid).checked == true) {
                document.getElementById(parentid).checked = true;
                checkParent = true;
            }
            if (checkChild == true && checkParent == false) {
                document.getElementById(parentid).checked = true;
                checkParent = true;
            }
            else if (checkChild == false && checkParent == false) {
                document.getElementById(parentid).checked = false;
                checkParent = true;
            }

        }
        function CheckDynamic(chkid) {
            id = chkid.id;
            var chk = $("#" + id + ":checked").length;
            var child = id + "List";
            if (chk != 0) {
                $("[id*=" + child + "] input").attr("checked", "checked");
            }
            else {
                $("[id*=" + child + "] input").removeAttr("checked");
            }
            checkparent(id);
        }