Question

我有一个checkboxlist，它从XML文件中获取数据。如果用户选择checkboxlist上的项目，我只想显示该项目并隐藏其他所有项目。在此之下，我想添加可点击的文字，让用户选择别的东西。因此，如果使用单击该文本，用户将再次看到复选框列表，并选择第一个项目。

基本上看起来像这样。 exampe 那么我们如何实现这一目标呢？

非常感谢。

要求使用vb.net/和checkboxlist控件，因为我们将动态地从数据库进行数据绑定。

Answer 1

这是一种方法。使用两个Panel作为两个不同CheckBoxLists的容器。第一个显示“FROM” - 项目，后者显示“TO” - 项目。

第二个小组最初是invisivle。除了CheckBoxList之外，它还包含一个LinkButton来触发取消选择。

开BtnSelect - 单击您将从第一个CheckBoxList添加所选项目并将其显示为Panel。在BtnChangeSelection - 单击您只需要切换两个面板的可见性并选择第一个项目。

这已经适用于多项选择。

ASPX（CSS取决于你）：

<div>
    <asp:Panel ID="PnlChkListAcademicYear" runat="server">
        <asp:CheckBoxList ID="ChkListAcademicYear" runat="server" /><br />
        <asp:LinkButton ID="BtnSelect" Text="Select" runat= "server" ></asp:LinkButton>
    </asp:Panel>
    <asp:panel ID="PnlChkListAcademicYearActive" Visible="false" runat="server">
        <asp:CheckBoxList ID="ChkListAcademicYearActive" Enabled="false" runat="server" /><br />
        <asp:LinkButton ID="BtnChangeSelection" Text="Change selection" runat= "server" ></asp:LinkButton>
    </asp:panel>
</div>

代码隐藏：

Private Sub BtnSelect_Click(sender As Object, e As System.EventArgs) Handles BtnSelect.Click
    If Me.ChkListAcademicYear.SelectedIndex <> -1 Then
        Dim selectedItems = (From item In Me.ChkListAcademicYear.Items.Cast(Of ListItem)() Where item.Selected).ToArray
        Me.ChkListAcademicYearActive.Items.Clear()
        Me.ChkListAcademicYearActive.Items.AddRange(selectedItems)
        Me.PnlChkListAcademicYearActive.Visible = True
        Me.PnlChkListAcademicYear.Visible = False
    End If
End Sub

Private Sub BtnChangeSelection_Click(sender As Object, e As System.EventArgs) Handles BtnChangeSelection.Click
    Me.ChkListAcademicYear.SelectedIndex = 0
    Me.PnlChkListAcademicYearActive.Visible = False
    Me.PnlChkListAcademicYear.Visible = True
End Sub

这是我的示例代码的其余部分，为了完整起见：

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
    If Not IsPostBack Then
        BindCheckboxList()
    End If
End Sub

Private Sub BindCheckboxList()
    Me.ChkListAcademicYear.DataSource = GetData()
    Me.ChkListAcademicYear.DataTextField = "Year"
    Me.ChkListAcademicYear.DataBind()
End Sub

Private Function GetData() As DataTable
    Dim years = {"2010/2009", "2009/2008", "2008/2007", "2007/2006", "2006/2005", "2005/2004", "2004/2003"}
    Dim tbl = New DataTable
    tbl.Columns.Add(New DataColumn("Year"))
    For Each y In years
        tbl.Rows.Add(y)
    Next
    Return tbl
End Function

Answer 2

我肯定会建议完全使用jQuery。它很光滑，很快。

<强> HTML
_{这将由您的<asp:CheckboxList />生成，您不必担心使用它，它只是供参考。}

<table id="checkboxWrapper">
    <tr>
        <td><input id="check1" type="checkbox" name="check1" value="Item 1" /></td>
        <td><label for="check1">2010/2009</label></td>
    </tr>
    <tr>
        <td><input id="check2" type="checkbox" name="check2" value="Item 2" /></td>
        <td><label for="check2">2009/2008</label><td>
            </tr>
    <tr>
        <td><input id="check3" type="checkbox" name="check3" value="Item 3" /></td>
        <td><label for="check3">2008/2007</label></td>
    </tr>
    <tr>
        <td><input id="check4" type="checkbox" name="check4" value="Item 4" /></td>
        <td><label for="check4">2007/2006</label></td>
    </tr>
</table>

    <div id="CheckboxListInscructionPlaceholder" style="display:none;">
        <a id="ChangeSelection" href="#">Change Selection</a>
    </div>
</div>

<强>的Javascript
_{这是您将添加到脚本中以便启用所需内容的内容。}

$('#checkboxWrapper  td > :checkbox').change(function() {
    // hide the checkboxes that are not Checked
    $('#checkboxWrapper td >  input:not(:checked)').hide()

    // hide the labels that correspond to the unchecked checkboxes
    $('#checkboxWrapper td >  label[for!="' + $(this).attr('id') + '"]').hide();

    // show the "Change Selection" link
    $('#CheckboxListInscructionPlaceholder').attr({
        style: 'display:block;'
    });

});

$('#ChangeSelection').click(function() {
    // uncheck all of the checkboxes
    $("#checkboxWrapper td > input").prop("checked", false);

    // show all of the checkboxes
    $('#checkboxWrapper td > input').show();

    // show all of the labels
    $('#checkboxWrapper td > label').show();

    // hide the "Change Selection" link
    $('#CheckboxListInscructionPlaceholder').attr({
        style: 'display:none;'
    });
});

Here's a working jsfiddle.

我没有在asp:Checkboxlist上对其进行测试，但这应该可行，因为我没有使用任何硬编码的id。

如何在复选框列表中隐藏未选择的项目？

2 个答案: