Локализация JQuery выбрать / отменить выбор всех - PullRequest
Новая
       6

Локализация JQuery выбрать / отменить выбор всех

0 голосов
/ 25 августа 2010

Я использую следующий фрагмент кода, чтобы создать все флажки для выбора / отмены выбора:

http://www.wiseguysonly.com/2010/01/15/select-and-unselect-all-checkboxes-with-jquery/

Это отличная помощь, но просто интересно, как вы можете локализовать соответствующие флажки только для тех, которые являются братьями и сестрами (т.е. в той же группе li элементов) поля выбора / отмены выбора.

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

(UPDATE)

Извините, вот пример кода -

HTML - 

<ul>
    <li class="select-all" ><input type="checkbox" name="select-all" onclick="toggleChecked(this.checked)"> Select / Deselect All</li>
    <li><input class="principal-group" type="checkbox" /> 1</li>
    <li><input class="principal-group" type="checkbox" /> 2</li>
    <li><input class="principal-group" type="checkbox" /> 3</li>
</ul>

<ul>
    <li class="select-all" ><input type="checkbox" name="select-all" onclick="toggleChecked(this.checked)"> Select / Deselect All</li>
    <li><input class="principal-group" type="checkbox" /> 1</li>
    <li><input class="principal-group" type="checkbox" /> 2</li>
    <li><input class="principal-group" type="checkbox" /> 3</li>
</ul>

и Jquery, который в настоящее время не различает две группы братьев и сестер - 

function toggleChecked(status) {
$(".principal-group").each( function() {
$(this).attr("checked",status);
})
}

Это сформулировано иначе, чем ваши предложения, как ответ на изменение статуса.

Ответы [ 3 ]

1 голос
/ 25 августа 2010

Я не уверен, как устроен ваш HTML, но если они находятся в одном контейнере, вы можете использовать 

$("input[type=checkbox]").click(function() {
   $(this).siblings("input[type=checkbox]").attr("checked", $(this).attr("checked"));
});

Вот образец .

0 голосов
/ 30 января 2012

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

$("form#mass-actions-units a#select-all").click(function(event) {
    event.preventDefault();
    var selectAllButton = $(this),
        checkboxes = $('table.view-units tr td input[type="checkbox"]');

    if(selectAllButton.prop("selected")) {
        selectAllButton.prop("selected", false)
                       .text("Select All");
        checkboxes.each(function() {
            $(this).prop("checked", false);
        });
    } else {
        selectAllButton.prop("selected", true)
                       .text("Deselect All");
        checkboxes.each(function() {
            $(this).prop("checked", true);
        });
    }
});
0 голосов
/ 25 августа 2010

Измените ваш селектор соответственно. Скажем, если ваши чекбоксы являются братьями и сестрами li, и когда у вас есть событие на li и вы делаете выбор / отмена выбора, вот способ. Вы должны добавить этот код в область элемента-брата (в данном случае li) 

$('li').click(function(){
    $(this).siblings().filter('input:checkbox').each( function() {
         $(this).attr("checked",status);
    });
};

Где статус может быть true или false.

...