Элементы CheckBoxList с использованием JavaScript

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 & "');")

Проблема в том, что, если я выберу любой из блоков, он будет проходить через все циклы, а затем установит для них значение параметра all.У меня проблемы с поиском наилучшего способа обойти это.

Я хочу избегать использования флажка рядом с списком флажков, тогда я должен сопоставить этот список с списком флажков.

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

 <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 3

Думаю, этот код поможет вам.

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