Выберите элементы управления в таблице в следующей строке, используя jQuery - PullRequest
Новая
       5

Выберите элементы управления в таблице в следующей строке, используя jQuery

0 голосов
/ 25 марта 2011

У меня есть таблица: в первой строке у меня есть привязка для нажатия, во второй - <asp:CheckboxList />, расширяющаяся до другой таблицы.

Как я могу получить доступ к входам внутри этой таблицы, используя jQuery? Я хочу выбрать все, используя одну ссылку, и отменить выбор, используя другую. 

<table>
    <tr>
        <td>
            <table>
                <tbody>
                    <tr>
                        <td>
                            <!-- Anchor to click -->
                            <a onclick="do stuff" href="javascript://">Select all</a>
                        </td>
                    </tr>
                </tbody>
            </table>
        </td>
    </tr>
    <tr>
        <td>
            <!-- CheckboxList -->
            <table id="ctl00_commonForm_ctl00_ctl00_listCheck" class="list" border="0">
                <tbody>
                    <tr>
                        <td>
                            <!-- input to select -->
                            <input id="ctl00_commonForm_ctl00_ctl00_listCheck_0" name="ctl00$commonForm$ctl00$ctl00$listCheck$0" checked="checked" type="checkbox"><label for="ctl00_commonForm_ctl00_ctl00_listCheck_0">Date</label>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <input id="ctl00_commonForm_ctl00_ctl00_listCheck_1" name="ctl00$commonForm$ctl00$ctl00$listCheck$1" checked="checked" type="checkbox"><label for="ctl00_commonForm_ctl00_ctl00_listCheck_1">Amount</label>
                        </td>
                    </tr>
                </tbody>
            </table>
        </td>
    </tr>
</table>

Я пытался $(this).parent().('#list > input'), но это не работает. Я не знаком с jQuery, поэтому, пожалуйста, помогите. Спасибо!

Ответы [ 3 ]

1 голос
/ 25 марта 2011

Это так же просто, как нацелить все флажки и установить флажок. 

$("#doIt").click(function(){
    $("input[type='checkbox']").attr("checked", true);
});

Если вы хотите снять чек 

$("#doIt").click(function(){
    $("input[type='checkbox']").removeAttr("checked");
});

Другой вариант - использовать toggle(), который можно использовать для включения или выключения флажков. 

$("#doIt").toggle(function() {
    $(this).text("Select All");
    $("input[type='checkbox']").removeAttr("checked");

}, function() {
    $(this).text("Deselect All");
    $("input[type='checkbox']").attr("checked", true);
});

Пример кода на jsfiddle .

1 голос
/ 25 марта 2011

Я бы удалил любой HTML-код из вашего тега привязки, избавился бы от щелчка и изменил бы href просто #. С jquery все, что вам нужно, это класс или идентификатор.

так что вы должны иметь:

в вашем html: 

<a id="select_on" class="toggle_checks" href="#">Select all</a>
<a class="toggle_checks" href="#">Select none</a>

в вашем javascript: 

$('a.toggle_checks').click(function(){
   $('table.list').children('input').attr('checked', this.id == 'select_on');
});

так что этот код делает то, что $ ('a.toggle_checks') выбирает все якорные теги с классом toggle_checks, связывая обработчик события click, когда щелкает $ ('table.list') выбирает таблицы со списком классов, .children ('input') выбирает входные данные в этих таблицах, а часть attr устанавливает проверяемый атрибут на флажок, если у тега привязки есть идентификатор select_on, и если нет, то в противном случае.

1 голос
/ 25 марта 2011

Это jQuery, я думаю, что вам нужно: 

// When the select link is clicked
$('#selectall').click( function ( ) {
   \\ For each checkbox inside an element with class "link" set to checked
    $('.list input[type=checkbox]').attr('checked','checked');
});

Вам нужно изменить ссылку на это: 

<a id="selectall" href="javascript:void( );">Select all</a>

Аналогично, для отмены выбора, jQuery: 

$('#deselectall').click( function ( ) {
    $('.list input[type=checkbox]').removeAttr('checked');
});

Ссылка: 

<a id="deselectall" href="javascript:void( );">Select all</a>

Поскольку мне было бы больно, я должен предостеречь от использования таблиц для разметки вашей формы.В наши дни это очень плохая практика, и вы можете сделать макет, который выглядит так же хорошо, но более гибко, используя div и CSS.Я бы пошел на: 

<div id="select_links">
    <!-- Anchor to click -->
    <a id="selectall" href="javascript:void( );">Select all</a>
    <a id="deselectall" href="javascript:void( );">Deselect all</a>
</div>
<div class="list">
    <div class="listItem">
        <input id="ctl00_commonForm_ctl00_ctl00_listCheck_0"
               name="ctl00$commonForm$ctl00$ctl00$listCheck$0" checked="checked"
               type="checkbox">
               <label for="ctl00_commonForm_ctl00_ctl00_listCheck_0">Date</label>
    </div>
    <div class="listItem">
        <input id="ctl00_commonForm_ctl00_ctl00_listCheck_1"
               name="ctl00$commonForm$ctl00$ctl00$listCheck$1" checked="checked"
               type="checkbox">
        <label for="ctl00_commonForm_ctl00_ctl00_listCheck_1">Amount</label>
    </div>
</div>

РЕДАКТИРОВАТЬ: Марк прав, это должно было быть removeAttr(checked), а не attr('checked',null);

...