체크 박스 목록에서 선택하지 않은 항목을 숨기는 방법?

Question

XML 파일에서 데이터를 가져 오는 체크 박스 목록이 있습니다. 사용자가 체크 박스 목록에서 항목을 선택하면 해당 항목을 표시하고 다른 모든 항목은 숨기려고합니다. 그 아래에는 다른 것을 선택할 수 있도록 클릭 가능한 텍스트를 추가하고 싶습니다. 따라서 해당 텍스트를 클릭하면 사용자는 첫 번째 항목을 선택하여 체크 박스 목록을 다시 볼 수 있습니다.

기본적으로 다음과 같이 보입니다. 그래서 어떻게해야합니까?

고마워요.

우리는 데이터베이스에서 동적으로 데이터 바인딩되므로 vb.net/ 및 checkboxlist 컨트롤을 사용해야합니다.

Answer 1

한 가지 방법이 있습니다. 두 개의 다른 CheckBoxLists에 대한 컨테이너로 두 개의 패널을 사용하십시오. 첫 번째는 "FROM"- 항목과 "TO"- 항목을 표시합니다.

두 번째 패널은 처음에는 보이지 않습니다. CheckBoxList 외에도 선택 취소를 트리거하는 LinkButton이 있습니다.

BtnSelect 클릭 - 첫 번째부터 두 번째 CheckBoxList에서 선택한 항목을 추가하고 패널로 표시합니다. 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> 

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 

---

입니다 :

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> 

자바 스크립트
_{이 당신이 필요로하는 것을 가능하게하기 위해 스크립트에 추가 할 것입니다 것입니다. 내가 asp:Checkboxlist에 그것을 테스트하지 않은}

Here's a working jsfiddle.

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

,하지만 난 어떤 하드 id 년대를 사용하지 않는 때문에이 작동합니다.