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

Question

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

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

Это большая помощь, но просто интересно, как вы могли бы идти о локализации (только в той же группе из элементов) поля select/deselect.

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

(ДОПОЛНЕНО)

К сожалению, вот несколько примеров кода -

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); 
}) 
} 

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

Answer 1

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

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

Вот sample.

Answer 2

Измените свой селектор соответствующим образом. Допустим, если ваши флажки являются братьями и сестрами li и когда у вас есть событие на li и выберите select/unselect, вот путь. У вас есть youu добавить этот код в области видимости родственного элемента (Li в данном случае)

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

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

Answer 3

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

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