Javascript 选中可选择其他复选框的复选框

我正在构建一个简单的用户角色管理UI，它基于RBAC规则具有多个权限。 所以我假设有一个名为users的组，在该组中，您可以看到“添加用户”、“编辑用户”、“删除用户”和“查看用户”

我想做的是能够选择整个“用户”组复选框，它应该选择属于它的子复选框，等等。我有大约20个这样的权限组

我在stack overflow中四处查看，但找不到解决方案，也找不到有效的方法

我正在寻找有关Javascript或Jquery的帮助

我已经包括了一个截图，告诉你们我的意思

我没有任何JS代码可以显示，因为我甚至不知道从哪里开始

我正在用

Blade

构建HTML视图，这是Laravel的模板引擎。这是我到目前为止的HTML

@foreach($permissions as $name => $permission)
    <div class="col-sm-3">
        <h4>
            <label>
                <input type="checkbox">
                {{ $name }}
            </label>
        </h4>
        @foreach($permission as $item)
            <div class="checkbox small">
                <label>
                        <input name="permissions[]" value="{{ $item }}" type="checkbox">
                    {{ $item }}
                </label>
            </div>
        @endforeach
    </div>
@endforeach

@foreach（$name=>$permission形式的权限）
{{$name}
@foreach（$权限作为$项）
{{$item}}
@endforeach
@endforeach

尝试代码：

$(function(){
    $(document).on('click','.col-sm-3 > h4 > label > input',function(){
         var tag = $(this).prop('checked');
         $(this).parents('.col-sm-3').find('.checkbox > label > input').prop('checked',tag);
    });
})

如果渲染模板后出现代码：

 $(document).on('click','.col-sm-3 > h4 > label > input',func)

可以替换为

$('.col-sm-3 > h4 > label > input').click(func)

---

将适当的类添加到父元素和子元素中，以便可以像下面的示例中那样修改代码

@foreach($permissions as $name => $permission)
    <div class="col-sm-3">
        <h4>
            <label>
                <input type="checkbox" class="{{ $name }}">
                {{ $name }}
            </label>
        </h4>
        @foreach($permission as $item)
            <div class="checkbox small">
                <label>
                        <input name="permissions[]" class="{{ $name }}-child" value="{{ $item }}" type="checkbox">
                    {{ $item }}
                </label>
            </div>
        @endforeach
    </div>
@endforeach

---

上面的一个小例子，您可以签入您的代码很好，但是为了使答案更小，我希望您将

类

属性指定给主div和checkbox，这样我们的jquery将依赖于我们自己的类/选择器，而不是引导类

<div class="col-sm-3 permission-block">
  <h4>
     <label>
        <input type="checkbox" class="something">
           {{ $name }}
     </label>
  </h4>

---

只需给出解析后的HTML。没有必要将您可以回答这个问题的人限制为您知道使用Blade的PHP的人。事实上，这让这个问题更加离题，因为这首先是一个“给我代码”类型的问题。据我所知，当选中

用户

复选框时，您希望同时选中子元素，这些子元素是

添加用户

，

编辑用户

，

删除用户

，

查看用户

？很抱歉，我认为您的代码中有一个大问题，或者它不是无用的。只有当{{$name}始终返回“users”时，此代码才会工作，正如我所看到的，此变量在循环中，因此在下一次迭代中，名称值会发生更改，因此脚本将无法工作。@Vedant{{{name}在循环中会将

用户

作为值，也会将

用户角色

作为值。因此，您的意思是需要复制相同的代码。我不认为这是我们应该做的，对吗？@Vedant如果这个网站能很好地跟踪答案的时间，那么你可以看到，在你添加内容之前，我已经开始写我的答案了。PS在我写的时候，先生，我不看别人写了什么，我专注于我的答案，但据你所知，在我生命中的大多数时候，情况正好相反。选择器更依赖于引导，如果块的设计/大小发生任何变化，甚至第二天也可能发生变化。。。我想这不是我喜欢的方式。（只是说。）因为我们需要根据col-md-3中的更改更改查询。我很懒，英语很差。对不起

$(".users").on("click",function(){ // use the same code for user-roles
var parentClassName = $(this).get(0).className;
if($(this).is(":checked")) {
    $("."+parentClassName+"-child").each(function(key,value){
    if($(value).get(0).checked==false) {
    $(value).get(0).checked = true;
    }
    });
} else {
    $("."+parentClassName+"-child").each(function(key,value){
    $(value).get(0).checked = false;
    });
}
});

<div class="col-sm-3 permission-block">
  <h4>
     <label>
        <input type="checkbox" class="something">
           {{ $name }}
     </label>
  </h4>

$(document).ready(function(){
   $(".something").on("click", function() {
      var checked = $(this).is(":checked");
      $(this).parent(".permission-block").children(".checkbox").find("input[type='checkbox']").props("checked", checked);
   })
})