使用 Javascript 切换复选框列表项答案

【问题标题】：Toggling checkboxlist item using Javascript使用 Javascript 切换复选框列表项
【发布时间】：2013-05-08 21:16:42
【问题描述】：

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

<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 中，我本质上是获取父元素的所有子元素，然后循环遍历它们以将所有子元素的选中属性设置为 false。最后，我将点击项的选中属性设置为 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;
     }
 }

如果一开始什么都没有检查，这可以正常工作。但是，当我第二次单击时，两个复选框都被选中。有人可以指导我如何更改此设置，以便如果一个复选框已被单击，当我单击第二个复选框时它将变为未选中状态。

感谢任何帮助。

【问题讨论】：

如果您将childNodes[i].setAttribute("checked", false) 更改为childNodes[i].checked = false 会怎样？
结果是一样的。第一次工作正常，第二次失败。我认为无论您使用 childNodes[i].setAttribute("checked", false) 还是 childNodes[i].checked = false，整个 for 循环都没有做任何事情。
我也这么认为。但无法弄清楚问题可能是什么。由于可能与关键字发生冲突，我会尝试重命名变量 childNodes。但它可能不会解决问题。
试试看我的回答。

标签： asp.net checkboxlist

【解决方案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;
    }
}

【讨论】：

感谢您的回复。但是，仍然无法在复选框之间切换。
经过一点调试，我发现了问题。在从 ASP 控件到 HTML 的转换过程中，每个复选框标记都放入 <td> 标记中。因此，不会对其他复选框执行任何操作。是否需要将此复选框集合定义为 ASP 控件？
检查我的答案的更新版本。这对你有用:)
非常感谢。你救了我的命。你不知道我花了多少小时试图解决这个问题。一个快速的问题。此 javascript 仅适用于 Internet Explorer，因为 event.srcElement 仅适用于 IE。知道如何使它更通用，以便在所有浏览器中都能正常工作吗？
很高兴为您提供帮助。有关更通用的解决方案，请查看以下问题：stackoverflow.com/questions/5301643/… .

【解决方案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;

                    });
                });
            });
        }

【讨论】：