本地化 jQuery 选择/取消全选

Question

我使用以下代码片段创建选择/取消选择所有复选框：

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

这是一个很大的帮助，但是只是想知道如何将受影响的复选框本地化为仅那些与选择/取消选择框同级的复选框（即在同一组 li 项中）。

我有多个动态生成的复选框列表（很难为它们提供不同的选择器类以针对脚本的变体），每个列表都有一个选择/取消选择复选框。目前，选中一个复选框会影响整组复选框。

（更新）

抱歉，这里有一些示例代码 -

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

Here's a

Answer 2

相应地更改您的选择器。假设您的复选框是 li 的同级，并且当您在 li 上发生事件并执行选择/取消选择时，方法如下。您可以在同级元素（本例中为 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);
        });
    }
});