Question

我正在使用以下代码段创建一个选择/取消选中所有复选框：

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

这是一个很好的帮助，但只是想知道如何将受影响的复选框本地化为仅选择/取消选择框中兄弟姐妹（即同一组li项目）。

我有多个动态生成的复选框列表（很难给出不同的选择器类来定位脚本的变体），每个复选框都有一个select / deselect复选框。目前，检查一个会影响整个复选框组。

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

与你的建议不同，这是对状态变化的回应。

Answer 1

我不确定你的HTML是如何布局的，但是如果它们在同一个容器中，你可以使用

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

这是sample。

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

本地化jQuery选择/取消选择全部

3 个答案: