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

Question

我有一个从 XML 文件获取数据的复选框列表。如果用户选择复选框列表上的某个项目，我只想显示该项目并隐藏其他所有内容。在其下方，我想添加可点击的文本，以便用户选择其他内容。因此，如果用户单击该文本，用户将再次看到复选框列表，并选择第一个项目。

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

非常感谢。

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

Answer 1

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

第二个面板最初是不可见的。除了 CheckBoxList 之外，它还包含一个 LinkBut​​ton 来触发取消选择。

在 BtnSelect 上单击，您将从第一个复选框添加所选项目到第二个 CheckBoxList 并显示其面板。在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
_{这将由您的 生成，您不必担心使用它，它只是在这里供参考。< /sub>}

<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;'
    });
});

这是一个工作的 jsfiddle。

我还没有在 asp:Checkboxlist 上测试过它，但这应该可以工作，因为我没有使用任何硬编码id 的。