选择一个复选框，选择其他复选框

-2

我构建了一个基于RBAC规则拥有多个权限的简单用户角色管理UI。所以我可以说一个叫做用户组的组，并且在那个组里面你会得到“添加用户”，“编辑用户”，“删除用户”和“查看用户”。选择一个复选框，选择其他复选框

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

我已经在堆栈溢出环顾四周，但无法找到解决方案或想出有用的东西。

我正在寻找一些Javascript或JQuery的帮助。

我已经收录了一张截图，向大家展示我的意思。

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

我在用Laravel的模板引擎Blade构建HTML视图。这是我的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

来源

2017-06-20 odannyc

只给解析的HTML。没有必要限制人们使用Blade来回答这个问题。实际上，给我们提出这个问题更偏离主题，因为考虑到这是一个*“给我代码”*类型的问题。 –

据我所知，当'用户'复选框被选中时，您还想检查'添加用户'，编辑用户'，'删除用户'，'查看用户'的子元素？ –

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

@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

来源

2017-06-20 02:16:17

抱歉说我认为你的代码存在一个大问题，或者它不是无用的。这段代码只有在{{$ name}}总是返回“users”并且我可以看到这个变量在循环中，所以在下一次迭代中名称值被改变，所以你的脚本将不起作用。 – Vedant

循环内的@Vedant {{name}}将把'users'作为值和'user-roles'。 –

所以你的意思是你需要复制相同的代码。我不认为这是我们应该这样做的方式，对吧？ – Vedant

try代码：

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

来源

2017-06-20 02:09:59 Invalid

选择器更依赖引导程序，如果设计/程序块的大小发生任何变化，甚至可能在第二天发生变化...我认为这不是首选方法。（只是说），因为我们需要根据col-md-3的变化来改变查询。 – Vedant

我很懒，而且英语很差对不起 – Invalid

检查你的代码只是罚款反而使答案更小，我想你分配class属性到你的主div和复选框，所以jquery将取决于我们自己的类/选择器而不是引导类。

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

来源

2017-06-20 02:41:23 Vedant

选择一个复选框，选择其他复选框

回答

相关问题