Question

请帮助我在四个复选框列表中选择一项。现在，我使用此参考在四个复选框列表中选择了4个项目 https://www.aspsnippets.com/Articles/Mutually-Exclusive-CheckBoxList-Control-in-ASP.Net.aspx

如果我使用单选按钮或将4复选框组合为1，这是一个很大的变化。预先感谢。

我正在使用asp.net，vb.net和javascript 这是我的代码：

复选框列表1

<asp:CheckBoxList ID="wklyYr1Q1S1" runat="server" RepeatColumns="5" RepeatDirection="horizontal"
    style="border-bottom: 1px solid #DCDCDC; margin-top:4px;">
    <asp:ListItem Text=":W1" Value="W1" onclick="MutExChkList(this);"></asp:ListItem>
    <asp:ListItem Text=":W2" Value="W2" onclick="MutExChkList(this);"></asp:ListItem>
    <asp:ListItem Text=":W3" Value="W3" onclick="MutExChkList(this);"></asp:ListItem>
    <asp:ListItem Text=":W4" Value="W4" onclick="MutExChkList(this);"></asp:ListItem>
    <asp:ListItem Text="" Value="" style="display: none"></asp:ListItem>
    <asp:ListItem Text=":W5" Value="W5" onclick="MutExChkList(this);"></asp:ListItem>
    <asp:ListItem Text=":W6" Value="W6" onclick="MutExChkList(this);"></asp:ListItem>
    <asp:ListItem Text=":W7" Value="W7" onclick="MutExChkList(this);"></asp:ListItem>
    <asp:ListItem Text=":W8" Value="W8" onclick="MutExChkList(this);"></asp:ListItem>
    <asp:ListItem Text="" Value="" style="display: none"></asp:ListItem>
    <asp:ListItem Text=":W9" Value="W9" onclick="MutExChkList(this);"></asp:ListItem>
    <asp:ListItem Text=":W10" Value="W10" onclick="MutExChkList(this);"></asp:ListItem>
    <asp:ListItem Text=":W11" Value="W11" onclick="MutExChkList(this);"></asp:ListItem>
    <asp:ListItem Text=":W12" Value="W12" onclick="MutExChkList(this);"></asp:ListItem>
    <asp:ListItem Text=":W13" Value="W13" onclick="MutExChkList(this);"></asp:ListItem>
</asp:CheckBoxList>

第2个复选框

<asp:CheckBoxList ID="wklyYr1Q2S1" runat="server" RepeatColumns="5" RepeatDirection="horizontal"
    Style="margin-left: 60px; border-bottom: 1px; border-bottom-color: #DCDCDC; border-bottom-style: solid;">
    <asp:ListItem Text=":W14" Value="W14" onclick="MutExChkList(this);"></asp:ListItem>
    <asp:ListItem Text=":W15" Value="W15" onclick="MutExChkList(this);"></asp:ListItem>
    <asp:ListItem Text=":W16" Value="W16" onclick="MutExChkList(this);"></asp:ListItem>
    <asp:ListItem Text=":W17" Value="W17" onclick="MutExChkList(this);"></asp:ListItem>
    <asp:ListItem Text="" Value="" style="display: none"></asp:ListItem>
    <asp:ListItem Text=":W18" Value="W18" onclick="MutExChkList(this);"></asp:ListItem>
    <asp:ListItem Text=":W19" Value="W19" onclick="MutExChkList(this);"></asp:ListItem>
    <asp:ListItem Text=":W20" Value="W20" onclick="MutExChkList(this);"></asp:ListItem>
    <asp:ListItem Text=":W21" Value="W21" onclick="MutExChkList(this);"></asp:ListItem>
    <asp:ListItem Text="" Value="" style="display: none"></asp:ListItem>
    <asp:ListItem Text=":W22" Value="W22" onclick="MutExChkList(this);"></asp:ListItem>
    <asp:ListItem Text=":W23" Value="W23" onclick="MutExChkList(this);"></asp:ListItem>
    <asp:ListItem Text=":W24" Value="W24" onclick="MutExChkList(this);"></asp:ListItem>
    <asp:ListItem Text=":W25" Value="W25" onclick="MutExChkList(this);"></asp:ListItem>
    <asp:ListItem Text=":W26" Value="W26" onclick="MutExChkList(this);"></asp:ListItem>
</asp:CheckBoxList>

第3个复选框

<asp:CheckBoxList ID="wklyYr1Q3S1" runat="server" RepeatColumns="5" RepeatDirection="horizontal"
    Style="margin-left: 60px; border-bottom: 1px; border-bottom-color: #DCDCDC; border-bottom-style: solid;">
    <asp:ListItem Text=":W27" Value="W27" onclick="MutExChkList(this);"></asp:ListItem>
    <asp:ListItem Text=":W28" Value="W28" onclick="MutExChkList(this);"></asp:ListItem>
    <asp:ListItem Text=":W29" Value="W29" onclick="MutExChkList(this);"></asp:ListItem>
    <asp:ListItem Text=":W30" Value="W30" onclick="MutExChkList(this);"></asp:ListItem>
    <asp:ListItem Text="" Value="" style="display: none"></asp:ListItem>
    <asp:ListItem Text=":W31" Value="W31" onclick="MutExChkList(this);"></asp:ListItem>
    <asp:ListItem Text=":W32" Value="W32" onclick="MutExChkList(this);"></asp:ListItem>
    <asp:ListItem Text=":W33" Value="W33" onclick="MutExChkList(this);"></asp:ListItem>
    <asp:ListItem Text=":W34" Value="W34" onclick="MutExChkList(this);"></asp:ListItem>
    <asp:ListItem Text="" Value="" style="display: none"></asp:ListItem>
    <asp:ListItem Text=":W35" Value="W35" onclick="MutExChkList(this);"></asp:ListItem>
    <asp:ListItem Text=":W36" Value="W36" onclick="MutExChkList(this);"></asp:ListItem>
    <asp:ListItem Text=":W37" Value="W37" onclick="MutExChkList(this);"></asp:ListItem>
    <asp:ListItem Text=":W38" Value="W38" onclick="MutExChkList(this);"></asp:ListItem>
    <asp:ListItem Text=":W39" Value="W39" onclick="MutExChkList(this);"></asp:ListItem>
</asp:CheckBoxList>

第4个复选框

<asp:CheckBoxList  ID="wklyYr1Q4S1" runat="server" RepeatColumns="5" RepeatDirection="horizontal"
    Style="margin-left: 60px; border-bottom: 1px; border-bottom-color: #DCDCDC; border-bottom-style: solid;">
    <asp:ListItem Text=":W40" Value="W40" onclick="MutExChkList(this);"></asp:ListItem>
    <asp:ListItem Text=":W41" Value="41" onclick="MutExChkList(this);"></asp:ListItem>
    <asp:ListItem Text=":W42" Value="42" onclick="MutExChkList(this);"></asp:ListItem>
    <asp:ListItem Text=":W43" Value="W43" onclick="MutExChkList(this);"></asp:ListItem>
    <asp:ListItem Text="" Value="" style="display: none"></asp:ListItem>
    <asp:ListItem Text=":W44" Value="W44" onclick="MutExChkList(this);"></asp:ListItem>
    <asp:ListItem Text=":W45" Value="W45" onclick="MutExChkList(this);"></asp:ListItem>
    <asp:ListItem Text=":W46" Value="W46" onclick="MutExChkList(this);"></asp:ListItem>
    <asp:ListItem Text=":W47" Value="W47" onclick="MutExChkList(this);"></asp:ListItem>
    <asp:ListItem Text="" Value="" style="display: none"></asp:ListItem>
    <asp:ListItem Text=":W48" Value="W48" onclick="MutExChkList(this);"></asp:ListItem>
    <asp:ListItem Text=":W49" Value="W49" onclick="MutExChkList(this);"></asp:ListItem>
    <asp:ListItem Text=":W50" Value="W50" onclick="MutExChkList(this);"></asp:ListItem>
    <asp:ListItem Text=":W51" Value="W51" onclick="MutExChkList(this);"></asp:ListItem>
    <asp:ListItem Text=":W52" Value="W52" onclick="MutExChkList(this);"></asp:ListItem>
</asp:CheckBoxList>

Javascript：

<script type = "text/javascript">
    function MutExChkList(chk)
    {
        var chkList = chk.parentNode.parentNode.parentNode;
        var chks = chkList.getElementsByTagName("input");
        for(var i=0;i<chks.length;i++){
            if(chks[i] != chk && chk.checked){
                chks[i].checked = false; }
            }
    }
</script>

后面的代码：

For i As Integer = 0 To wklyYr1Q1S1.Items.Count - 1
    wklyYr1Q1S1.Items(i).Attributes.Add("onclick", "MutExChkList(this)")
Next

For i As Integer = 0 To wklyYr1Q2S1.Items.Count - 1
    wklyYr1Q2S1.Items(i).Attributes.Add("onclick", "MutExChkList(this)")
Next

For i As Integer = 0 To wklyYr1Q3S1.Items.Count - 1
    wklyYr1Q3S1.Items(i).Attributes.Add("onclick", "MutExChkList(this)")
Next

For i As Integer = 0 To wklyYr1Q4S1.Items.Count - 1
    wklyYr1Q4S1.Items(i).Attributes.Add("onclick", "MutExChkList(this)")
Next

Answer 1

正在发生的事情是您的JavaScript对DOM的提升不够。 ASP.Net CheckboxList呈现在表内部。因此，您的MutExChkList函数中的“ .parent.parent.parent”调用提供了对TABLE元素的引用，然后它会在其中查找复选框。您将需要未知数量的.parent调用来收集适当的容器方面，以扫描多个CheckboxLists中的复选框。

或者，您可以只搜索“文档”中的所有复选框并使用所有复选框。修改您的JS以执行此类操作可能会满足您的需要。

function MutExChkList(chk) {
    var cbs = document.querySelectorAll("input[type='checkbox']");
    for(var i=0; i < cbs.length; i++) {
         if (cbs[i].id <> chk.id) { 
           cbs[i].checked = false;
         }
    }
}

所有这些都说明了，对于您要执行的操作，单个RadioButtonList会更好。甚至所有都具有相同GROUPNAME的多个RadioButtonList，也可以完成您要尝试的操作。另外，与RadioButtonList或CheckboxList相比，使用Repeater可以更好地控制结果标记。对标记的更好控制意味着您无需将其放在表中。

编辑

对于较旧的浏览器，请尝试以下操作：

function MutExChkList(chk) {
   var cbs= document.getElementsByTagName("input");
   for(var i = 0; i < cbs.length; i++) {
      if(cbs[i].type == "checkbox") {
         if (cbs[i].id <> chk.id) {
            cbs[i].checked = false;
         } 
      }     
   }
}

只允许在四个复选框列表中选择一项

1 个答案:

编辑