如何隱藏複選框列表中的未選項目？

Question

我有一個checkboxlist從XML文件中獲取數據。如果用戶在複選框列表中選擇一個項目，我只想顯示該項目並隱藏其他所有內容。在這之下，我想添加可點擊的文本以讓用戶選擇其他內容。因此，如果使用點擊該文本，則用戶將再次看到複選框列表，並且選擇第一項。

基本上看起來像這樣。 那麼我們如何做到這一點？

非常感謝。

要求使用vb.net/和checkboxlist控件，因爲我們將從數據庫動態綁定數據庫。

Answer 1

這是一種方法。使用兩個面板作爲兩個不同CheckBoxLists的容器。第一個顯示你的「FROM」 - 項目和後者你的「TO」 - 項目。

第二個面板最初是隱式的。除CheckBoxList外，它還包含一個LinkBut​​ton來觸發取消選擇。

On 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

我肯定會推薦做th完全是用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的工作。