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