チェックボックスリストの非選択アイテムを非表示にする方法は？

Question

XMLファイルからデータを取得するチェックボックスリストがあります。ユーザーがチェックボックスリストの項目を選択した場合、その項目を表示して他の項目をすべて非表示にしたいだけです。その下に、クリック可能なテキストを追加して、何か他のものを選択できるようにします。したがって、そのテキストを使用すると、最初の項目が選択された状態でチェックボックスリストが再び表示されます。

基本的には次のようになります。 これをどのように達成するのですか？

ありがとうございます。

データベースから動的にデータバインディングするので、vb.net/checkboxlistコントロールを使用する必要があります。

Answer 1

これは片道です。 2つの異なるCheckBoxListsのコンテナとして2つのパネルを使用します。最初はあなたの "FROM" - 項目と後者の "TO" - 項目を表示します。

第2のパネルは最初は非表示である。 CheckBoxListとは別に、選択解除をトリガーするLinkBut​​tonが含まれています。

オンBtnSelect - 最初のチェックボックスリストから2番目のチェックボックスリストに選択した項目を追加し、パネルを表示します。 On 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です。それは滑らかで速いです。

これはあなたの<asp:CheckboxList />によって生成されるウィル
_{HTML、あなたがそれを使用して心配する必要はありません、それは参考のためにここだけです。}

<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年代を使用していないので、動作するはずです。