jQuery的下一个兄弟选择器（“上一页〜兄弟姐妹”）

Question

HTML：

h4 
    | Users 
    button.btn.btn-primary.btn-xs.check_button aria-label=("Left Align") type="button" 
    span.glyphicon.glyphicon-chevron-down aria-hidden="true" 

.hsep 

.form-group 
    == collection_check_boxes :group, :user_ids, User.all, :id, :login do |b| 
    == "<div class='checkbox'>#{b.label { b.check_box + b.text }}</div>" 

h4 
    | Domains 
    button.btn.btn-primary.btn-xs.check_button aria-label=("Left Align") type="button" 
    span.glyphicon.glyphicon-chevron-down aria-hidden="true" 

.hsep 

.form-group 
    == collection_check_boxes :group, :domain_ids, Domain.all, :id, :domain_name do |b| 
    == "<div class='checkbox'>#{b.label { b.check_box + b.text }}</div>" 

的Javascript：

$(".check_button").on("click", -> 
cbxs = $('h4 ~ .form-group').first().find('input[type="checkbox"]') 
cbxs.prop("checked", !cbxs.prop("checked")) 
) 

所以这是一种形式，我有两个复选框列表，我想一个按钮为每个他们检查/取消所有，但我希望这个按钮是通用的，因为它存在于多个视图中。

JavaScript的工作正常，但您可能已经注意到，如果第二个按钮被点击，它会检查/取消选中第一个collection_check_boxes中的框，因为我的$('h4 ~ .form-group')选择器。

所以我想是不是使用原始h4选择，但使用这样的$(this).parent()第一，这将给我正确的h4元素是什么，我的问题是我怎么使用$('h4 ~ .form-group')呢？ 我不能使它工作，因为我只知道如何直接使用它h4，但我不知道如何实际更改h4。

这是一个非常简单的问题，但我不知道如何在更改我的h4时使用jQuery("prev ~ siblings")选择器。

Answer 1

您需要识别作为点击框的父母的h4。

的一种方式做到这一点是使用closest与nextAll和first组合：

$(".check_button").on("click", -> 
cbxs = $(this).closest('h4').nextAll('.form-group').first().find('input[type="checkbox"]') 
cbxs.prop("checked", !cbxs.prop("checked")) 
)