Question

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

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

我已经查看了堆栈溢出但无法找到解决方案或想出一些有用的东西。

我正在寻找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

Answer 1

尝试代码：

$(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)

Answer 2

将适当的类添加到父元素和子元素中，以便可以更改代码，如下例所示。

@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

关于类名，您的HTML将会如此。

users<input class="users" type="checkbox" />
<br><br>
<input class="users-child" type="checkbox" />
<input class="users-child" type="checkbox" />
<input class="users-child" type="checkbox" />
<input class="users-child" type="checkbox" />
<input class="users-child" type="checkbox" />
<input class="users-child" type="checkbox" />

最后你的jQuery部分

$(".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;
    });
}
});

上面的一个小例子，您可以查看jsFiddle

Answer 3

您的代码很好但是为了使答案更小，我希望您将class属性分配给主div和复选框，以便jquery将依赖于我们自己的类/选择器而不是bootstrap类。 / p>

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

然后你可以添加类似这样的jQuery。

$(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);
   })
})

选中一个选中其他复选框的复选框

3 个答案: