1

我有一个包含两个项目的复选框列表。我很难使用 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;
     }
 }

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

任何帮助表示赞赏。

4

2 回答 2

2

要使您的 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;
    }
}
于 2013-05-09T04:12:22.633 回答
-1

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

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

                    });
                });
            });
        }
于 2013-10-29T07:56:29.247 回答