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元素，我的问题是我如何使用{ {1}}然后呢？我无法使其发挥作用，因为我只知道如何直接使用$('h4 ~ .form-group')，但我不知道如何更改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"))
)

jQuery Next兄弟姐妹选择器（“prev~siblings”）

1 个答案: