選擇一個複選框，選擇其他複選框

-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

選擇一個複選框，選擇其他複選框

回答

相關問題