Question

我有一个包含两个项目的复选框列表。我很难使用JavaScript在两个checkboxlist项之间切换。我想点击一个，如果已经检查了另一个，复选标记应该消失。以下是复选框列表的标记。

<asp:CheckBoxList ID="chkApplyLimits" runat="server" RepeatColumns="2" ClientIDMode="Static" onclick="CheckBoxToggle">
   <asp:ListItem Text="Yes" Value="1"></asp:ListItem>
   <asp:ListItem Text="No" Value="0"></asp:ListItem>
</asp:CheckBoxList>

我正在使用以下JavaScript函数来启用切换。在JavaScript中，我基本上获取父项的所有子元素，然后循环遍历它们以为所有子元素设置checked属性false。最后，我将项目的checked属性单击为true。

 function CheckBoxToggle(event) {
     if (event.srcElement.type == 'checkbox') {
         var childNodes = event.srcElement.parentNode.childNodes;
         for (var i = 0; i < childNodes.length; i++) {
             childNodes[i].setAttribute("checked", false);
         }
         event.srcElement.checked = true;
     }
 }

如果在开头没有检查任何内容，这可以正常工作。但是，当我第二次单击时，两个复选框都会被选中。有人可以指示我如何更改这个，以便如果已经点击了一个复选框，当我点击第二个复选框时它将被取消选中。

感谢任何帮助。

Answer 1

要使您的javascript代码正常工作，请在HTML中定义您的复选框集合而不是ASP控件：

<div id="CheckboxList" onclick="CheckBoxToggle()">
    <input type="checkbox" value="0" name="checkbox1" /><label for="checkbox1">A</label>
    <input type="checkbox" value="1" name="checkbox2" /><label for="checkbox2">B</label>
    <input type="checkbox" value="2" name="checkbox3" /><label for="checkbox3">C</label>
    <input type="checkbox" value="3" name="checkbox4" /><label for="checkbox4">D</label>
</div>

然后你可以使用这个javascript函数：

function CheckBoxToggle() {
    var target = event.target || event.srcElement;
    if (target.type == 'checkbox') {
        var ch = target.parentNode.childNodes;
        for (var i = 0; i < ch.length; i++) {
            ch[i].checked = false;
        }
        target.checked = true;
    }
}

或者，您可以使用ASP控件，但在从ASP转换为HTML时：

<asp:CheckBoxList ID="chkApplyLimits" runat="server" RepeatColumns="2" ClientIDMode="Static" onclick="CheckBoxToggle()">
   <asp:ListItem Text="Yes" Value="1"></asp:ListItem>
   <asp:ListItem Text="No" Value="0"></asp:ListItem>
   <asp:ListItem Text="No" Value="0"></asp:ListItem>
   <asp:ListItem Text="No" Value="0"></asp:ListItem>
</asp:CheckBoxList>

被翻译成：

<table id="chkApplyLimits" onclick="CheckBoxToggle()">
<tr>
    <td><input id="chkApplyLimits_0" type="checkbox" name="chkApplyLimits$chkApplyLimits_0" value="1" /><label for="chkApplyLimits_0">Yes</label></td><td><input id="chkApplyLimits_2" type="checkbox" name="chkApplyLimits$chkApplyLimits_2" value="0" /><label for="chkApplyLimits_2">No</label></td>
</tr><tr>
    <td><input id="chkApplyLimits_1" type="checkbox" name="chkApplyLimits$chkApplyLimits_1" value="0" /><label for="chkApplyLimits_1">No</label></td><td><input id="chkApplyLimits_3" type="checkbox" name="chkApplyLimits$chkApplyLimits_3" value="0" /><label for="chkApplyLimits_3">No</label></td>
</tr><tr>
</table>

所以你的javascript函数需要改成：

function CheckBoxToggle() {
    var target = event.target || event.srcElement;
    if (target.type == 'checkbox') {
        var table = target.parentNode.parentNode.parentNode.childNodes;
        for (var i = 0; i < table.length; i++) {
            var tr = table[i].childNodes;
            for (var j = 0; j < tr.length; j++) {
                if (tr[j].tagName == 'TD')
                    tr[j].childNodes[0].checked = false;
            }
        }
        target.checked = true;
    }
}

Answer 2

请检查此代码，这将解决您的问题。

<asp:CheckBoxList ID="chkApplyLimits" runat="server" RepeatColumns="2" onclick="SetCheckboxListSingle('chkApplyLimits')">
   <asp:ListItem Text="Yes" Value="1"></asp:ListItem>
   <asp:ListItem Text="No" Value="0"></asp:ListItem>
</asp:CheckBoxList>

function SetCheckboxListSingle(cblId) {
            $('#' + cblId).find('input[type="checkbox"]').each(function () {
                $(this).bind('click', function () {
                    var clickedCbxId = $(this).attr('id');
                    $('#' + cblId).find('input[type="checkbox"]').each(function () {
                        if (clickedCbxId == $(this).attr('id'))
                            return true;

                        document.getElementById($(this).attr('id')).checked = false;

                    });
                });
            });
        }

使用Javascript切换复选框列表项

2 个答案: