Question

我有以下复选框列表。选择“无”时，我需要取消选中其余列表项。我怎么做？感谢

<asp:CheckBoxList ID="CheckBoxList1" RepeatDirection="Horizontal" runat="server">
    <asp:ListItem Value="1">French</asp:ListItem> 
    <asp:ListItem Value="2">Spanish</asp:ListItem> 
    <asp:ListItem Value="3">Italian</asp:ListItem> 
    <asp:ListItem Value="4">German</asp:ListItem> 
    <asp:ListItem Value="5">Portuguese</asp:ListItem>   
    <asp:ListItem Value="6">Chinese</asp:ListItem>
    <asp:ListItem Value="7">Japanese</asp:ListItem>
    <asp:ListItem Value="8">Russian</asp:ListItem>
    <asp:ListItem Value="Other">Other</asp:ListItem>
    <asp:ListItem Value="None">None</asp:ListItem>
    </asp:CheckBoxList>

更新 Darin Dimitrov将以下答案翻译为vb.net

 Public Shared Function InlineAssignHelper(Of T)(ByRef target As T, ByVal value As T) As T
    target = value
    Return value
   End Function

   Protected Sub CheckBoxList1_SelectedIndexChanged(ByVal sender As Object, ByVal e As System.EventArgs) Handles CheckBoxList1.SelectedIndexChanged
   Dim listItems = CheckBoxList1.Items.Cast(Of ListItem)() 
            Dim isNoneSelected = listItems.Any(Function(x) x.Value = "None" AndAlso x.Selected = True) 
       If isNoneSelected Then 
                     listItems.Where(Function(x) x.Value <> "None").ToList().ForEach(Function(x) InlineAssignHelper(x.Selected, False)) 
       End If
  End Sub

Answer 1

有两种可能性：

服务器端：订阅OnSelectedIndexChanged事件并启用AutoPostBack：

<asp:CheckBoxList ID="CheckBoxList1" RepeatDirection="Horizontal" runat="server" AutoPostBack="true" OnSelectedIndexChanged="CheckBoxList1_SelectedIndexChanged">
    <asp:ListItem Value="1">French</asp:ListItem> 
    <asp:ListItem Value="2">Spanish</asp:ListItem> 
    <asp:ListItem Value="3">Italian</asp:ListItem> 
    <asp:ListItem Value="4">German</asp:ListItem> 
    <asp:ListItem Value="5">Portuguese</asp:ListItem>   
    <asp:ListItem Value="6">Chinese</asp:ListItem>
    <asp:ListItem Value="7">Japanese</asp:ListItem>
    <asp:ListItem Value="8">Russian</asp:ListItem>
    <asp:ListItem Value="Other">Other</asp:ListItem>
    <asp:ListItem Value="None">None</asp:ListItem>
</asp:CheckBoxList>

并在后面的代码中：

protected void CheckBoxList1_SelectedIndexChanged(object sender, EventArgs e)
{
    var listItems = CheckBoxList1.Items.Cast<ListItem>();
    var isNoneSelected = listItems.Any(x => x.Value == "None" && x.Selected == true);
    if (isNoneSelected)
    {
        listItems.Where(x => x.Value != "None").ToList().ForEach(x => x.Selected = false);
    }
}

客户端：使用javascript检测用户何时点击“无”复选框并取消选中其他复选框。

Answer 2

 <asp:CheckBoxList ID="CheckBoxList1" RepeatDirection="Horizontal" runat="server" AutoPostBack="true" OnSelectedIndexChanged="CheckBoxList1_SelectedIndexChanged">
    <asp:ListItem Value="1">French</asp:ListItem> 
            <asp:ListItem Value="2">Spanish</asp:ListItem> 
            <asp:ListItem Value="3">Italian</asp:ListItem> 
            <asp:ListItem Value="4">German</asp:ListItem> 
            <asp:ListItem Value="5">Portuguese</asp:ListItem>   
            <asp:ListItem Value="6">Chinese</asp:ListItem>
            <asp:ListItem Value="7">Japanese</asp:ListItem>
            <asp:ListItem Value="8">Russian</asp:ListItem>
            <asp:ListItem Value="Other">Other</asp:ListItem>  
    </asp:CheckBoxList>
    <table>
        <tr>
            <td>
                <asp:CheckBox ID="chkNone" Text="None" runat="server" AutoPostBack="True" OnCheckedChanged="chkNone_CheckedChanged" />
            </td>
        </tr>
    </table>

删除了“无”选项从列表中，以便我们可以取消选择如果用户决定，则为“无” 做一个语言选择。

    /// <summary>
    /// clear the list
    /// and checked "none" as SelectedIndexChanged resets it
    /// </summary>
    protected void chkNone_CheckedChanged(object sender, EventArgs e)
    {
        CheckBoxList1.ClearSelection();
        chkNone.Checked = true;
    }

    /// <summary>
    /// If a user makes a selection clear the "none" checkbox
    /// </summary>
    protected void cklWatchMoveVideosIf_SelectedIndexChanged(object sender, EventArgs e)
    {
        chkNone.Checked = false;
    }

复选框列表和checkboxOther可以添加到updatePanel中防止完整的回发，这使得这个更平滑。

如果选择了一个列表项，则取消选中复选框列表

2 个答案: