Как скрыть невыбранные элементы в списке флажков? - PullRequest
Новая
       9

Как скрыть невыбранные элементы в списке флажков?

4 голосов
/ 25 января 2012

У меня есть флажок, который получает данные из файла XML. Если пользователь выбирает элемент в списке флажков, я просто хочу показать этот элемент и скрыть все остальное. И ниже, я хочу добавить кликабельный текст, чтобы позволить использование, чтобы выбрать что-то еще. Поэтому, если вы нажмете на этот текст, пользователь снова увидит флажок с первым выбранным элементом.

В основном это выглядит так. exampe Так как же нам этого добиться?

Большое спасибо.

требует использования vb.net/ и элемента управления checkboxlist, поскольку мы будем динамически привязывать данные из базы данных.

Ответы [ 2 ]

2 голосов
/ 25 января 2012

Вот один из способов. Используйте две панели в качестве контейнера для двух разных CheckBoxLists. Первый отображает ваши элементы "FROM", а второй - элементы "TO".

Вторая панель изначально невидима. Помимо CheckBoxList он содержит LinkButton для запуска отмены выбора.

Вкл. 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>

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
1 голос
/ 26 января 2012

Я бы определенно рекомендовал делать это полностью с 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;'
    });
});

Вот рабочий jsfiddle.

Я не тестировал его на asp:Checkboxlist, но это должно работать, так как я не использую какие-либо жестко id

.
...