如何选择所选元素内的所有div答案

【问题标题】：How to select all the divs inside selected element如何选择所选元素内的所有div
【发布时间】：2016-03-07 08:44:26
【问题描述】：

这是我的 HTML 代码

<div class="panel-body">
    <p> <input name="select_all" type="checkbox" value="1"> Select/Deselect All</p>

    <div class="input-group"><span class="input-group-addon">
        <span><input checked="checked" name="manage_group" type="checkbox" value="1"></span>
        <span class="form-control">Create/manage groups of candidates</span
    </div>

    <div class="input-group"><span class="input-group-addon">
        <span><input checked="checked" name="manage_candidate" type="checkbox" value="1"></span>
        <span class="form-control">Modify candidate details</span>
    </div>
</div>

如果选中“select_all”复选框，我想选中所有复选框（仅在父 div 中），如果未选中“select_all”，则取消选中所有复选框。

这是我的 jquery 代码：

$(".panel-body p input[type='checkbox']").click(function() {
    if(this.checked){
        //alert('Checked');
        var selected = this.closest(".panel-body");
        $(selected+"div input[type='checkbox']").each(function () {
            alert ('Hi');
        });
    }else{
    }
});

但它不起作用。它不接受选择器内的“选定”变量。如何选择选定元素内的所有复选框？

【问题讨论】：

试试这样，因为 selected 已经是一个 jquery 选择器：selected.find("div input[type='checkbox']")
selected.find() 不起作用。 Uncaught TypeError: selected.find 不是函数

标签： javascript jquery

【解决方案1】：

你的问题是这一行：-

this.closest(".panel-body");

this 是元素而不是 jQuery 对象。

你可以像这样实现你想要的：-

$(".panel-body p input[type='checkbox']").change(function() {
    var selected = $(this).closest(".panel-body");
    selected.find("div input[type='checkbox']").prop('checked', this.checked);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="panel-body">
  <p>
    <input name="select_all" type="checkbox" value="1">Select/Deselect All</p>

  <div class="input-group"><span class="input-group-addon">
            <input checked="checked" name="manage_group" type="checkbox" value="1"></span>
    <span class="form-control">Create/manage groups of candidates</span>
  </div>

  <div class="input-group"><span class="input-group-addon">
            <input checked="checked" name="manage_candidate" type="checkbox" value="1"></span>
    <span class="form-control">Modify candidate details</span>
  </div>

</div>

【讨论】：

非常感谢@BenG，我敲了好几个小时才把它贴在这里。你不仅解决了这个问题，你还教育了我更多关于 jquery 的知识。非常感谢。

【解决方案2】：

你可以像下面那样做。在最近的.panel-body 中查找所有checkbox 并根据select_all 状态更改checked 属性。

$(":checkbox[name=select_all]").change(function () {
    $(this).closest('.panel-body').find(':checkbox').not(this).prop('checked', this.checked);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="panel-body">
    <p> <input name="select_all" type="checkbox" value="1"> Select/Deselect All</p>

    <div class="input-group">
        <span class="input-group-addon">
            <input checked="checked" name="manage_group" type="checkbox" value="1">
        </span>
        <span class="form-control">Create/manage groups of candidates</span>
    </div>
    <div class="input-group">
        <span class="input-group-addon">
            <input checked="checked" name="manage_candidate" type="checkbox" value="1">
        </span>
        <span class="form-control">Modify candidate details</span>
    </div>
</div>

【讨论】：