как выбрать все флажки, когда пользователь нажимает кнопку

Question

У меня есть форма с кнопкой «Выбрать все» и несколько флажков. я хочу, чтобы он установил все флажки, когда пользователь нажимает кнопку «Выбрать все».

есть ли в jquery элегантный способ сделать это?

РЕДАКТИРОВАТЬ # 2: я выделил проблему до этого кода; style = "display: none;". если я удаляю этот код, он работает нормально. есть идеи?

РЕДАКТИРОВАТЬ: ответы ниже работают в моей тестовой форме, но кнопка в этом случае находится внутри формы, которая находится внутри div, который отображается только как часть simpledialog.show (). в этом случае, по какой-то причине, когда я нажимаю на кнопку, я не вижу ничего, что происходит:

JavaScript:

<script type="text/javascript">
$(document).ready(function() {
    $('#sdHc3').simpleDialog({
        showCloseLabel: false,
        open: function() {
            $('#checkboxStatus').html('');
        },
        close: function() {
            var c = [];
            $('#checkboxForm :checkbox:checked').each(function() {
                c.push($(this).val());
            });
            $('#checkboxStatus').html('&nbsp;&nbsp;Checked <b>' + c.join(', ') + '</b>.').show();
        }
    });

});

<script type="text/javascript">
$(function() {
$('#selectAll').click(function() {
        var select_all = (this.value === 'Select All');
        $(':checkbox').attr('checked', select_all);
        this.value = (select_all) ? 'Deselect All' : 'Select All';
    });
});

корпус:

<div style="display: none;" class="scrollableDiv" id="simpleDialog3">
    <h3>DEMO3</h3>
    <form id="checkboxForm">
    <input type="button" id="selectAll" value="TT" />
    <input type="checkbox" class="chckbx" value="1" /><br />
    <input type="checkbox" class="chckbx" value="1" /><br />
    </form>
    <p>
        <a href="#" class="close">Close</a></p>
</div>

есть идеи, почему это не сработает в этом случае?

Answer 1

$(function(){
    $('#myButton').click(function(){
        var select_all = (this.value === 'Select All');
        $('input:checkbox').attr('checked', select_all);
        this.value = (select_all) ? 'Deselect All' : 'Select All';        
    });
});

Попробуйте разместить этот код перед созданием диалогового окна.

Возможно, вы захотите перейти на jQuery UI Dialog .

Answer 2

Если вы нажмете эту кнопку при нажатии, все флажки на странице будут установлены:

jQuery("input:checkbox").attr('checked','checked');

Вы можете изменить селектор («input: checkbox»), чтобы обеспечить лучший контекст (и, возможно, ускорить его выполнение)

• атр ()
• : Флажок

Answer 3

Итак, если ваша кнопка выбора все имеет идентификатор выбора всего, вы говорите:

$('#select-all').click(function(){
   $('input:checkbox').attr('checked', 'checked');   
);

Answer 4

В тех случаях, когда мне нужна та же функциональность, обычно это таблица строк с флажками внизу. В этом случае вы можете включить этот фрагмент кода, а затем в любой момент, когда в ячейке заголовка есть флажок, все связанные флажки в столбце ниже будут включаться / выключаться в зависимости от его значения.

Предполагая, что HTML так:

<table>
    <thead>
        <tr>
            <th><input type="checkbox" /></th>
            <th>...</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td><input type="checkbox" name="row[0]" /></td>
            <td>...</td>
        </tr>
        ...
    </tbody>
</table>

Вот jQuery:

$('th input:checkbox').click(function() {
    var $this = $(this),
        colNum = $this.closest('th').prevAll('th').length,
        checked = $this.attr('checked')
    ;
    $this
        .closest('table')
        .find('tbody > tr')
        .each(function() {
            $(this)
                .children("td")
                .eq(colNum)
                .find("input:checkbox")
                .attr('checked', checked)
            ;
        })
    ;
});

Он не требует никаких дополнительных идентификаторов или классов или чего-либо еще и может работать для нескольких столбцов флажков, что приятно. Вот демонстрационная страница: http://jsbin.com/eqeno

Answer 5

просто присвойте всем флажкам класс и прикрепите этот jQuery к кнопке:

$(document).ready( function () {
  $('#myButton').click( function() {
    $('.checkbox').attr('checked','checked');
  });
}

Предполагается, что у вашей кнопки есть id = "myButton", а у ваших флажков - class = "checkbox".