How to hide unselected items in checkboxlist?

Question

I have a checkboxlist that receives data from an XML file. If the user selects an item in the checkboxlist, I just want to show that item and hide everything else. And under that, I want to add interactive text to allow the use of something else. Therefore, if you click on this text, the user will again see this flag with the first item selected.

Mostly look like this. So how do we achieve this?

Many thanks.

it is required to use the vb.net/and checkboxlist control, since we will dynamically bind data from the database.

Answer 1

Here is one way. Use two Panels as a container for two different CheckBoxLists. The first shows your "OT" -Items, and the last - "TO" -Items.

The second panel is initially invisible. In addition to CheckBoxList, it contains LinkButton to trigger the undo.

On BtnSelect that you add the selected items from the first to the second CheckBoxList and show it Panel. On BtnChangeSelection , you only need to switch the visibility of both panels and select the first element.

This already works with multiple selections.

ASPX (CSS is up to you):

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

Codebehind:

 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 

---

This is the rest of my sample code for completeness:

 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

I definitely recommend doing this completely with jQuery. He is slippery and fast.

HTML
_{this wil will be generated by your <asp:CheckboxList /> , you don't need to worry about using it, it's just here for reference.}

 <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
_{this is what you add to your scripts to include what you need.}

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

This is where jsfiddle works.

I have not tested it on asp:Checkboxlist , but this should work, since I do not use hard-coded id .