多層選擇所有複選框系統

Question

我正在嘗試創建一個多層選擇全部功能。目標是能夠選擇部門內的所有員工或完全選擇所有員工。我也需要能夠取消選擇。

我到目前爲止的代碼如下：（部門選擇的作品完美，但我不能讓師傅檢查所有框工作）

<-- JAVASCRIPT -- 

$(function() { 
$('.checkall').on('click', function() { 
    $(this).closest('fieldset').find(':checkbox').prop('checked', this.checked); 
}); 
}); 

-- separate script -- 

$(function() { 
$("#checkAll").click(function() { 
    if ($("#checkAll").is(':checked')) { 
     $(".mast").prop("checked", true); 
    } else { 
     $(".mast").prop("checked", false); 
    } 
}); 
}); 

--HTML-- 

<input type="checkbox" name="checkAll" id="checkAll"><br/> 

                 <fieldset><div><input type="checkbox" class="checkall" name="mast"> IT Dept</div><br> 
                  <div><input type="checkbox"> number 1</div> 
                 <div><input type="checkbox"> number 2</div> 
                 <div><input type="checkbox"> number 3</div> 
                 <div><input type="checkbox"> number 4</div> 
              </fieldset>    
             </div> 
             <div class="col-md-4 col-sm-4"> 
              <fieldset><div><input type="checkbox" class="checkall" name="mast"> Marketing</div><br> 
                 <div><input type="checkbox"> number 1</div> 
                 <div><input type="checkbox"> number 2</div> 
                 <div><input type="checkbox"> number 3</div> 
                 <div><input type="checkbox"> number 4</div> 
                 <div><input type="checkbox"> number 5</div> 
                 <div><input type="checkbox"> number 6</div> 
              </fieldset>    
             class="col-md-4 col-sm-4"> 
              <fieldset><div><input type="checkbox" class="checkall" name="mast"> Finance</div><br> 
                 <div><input type="checkbox"> number 1</div> 
                 <div><input type="checkbox"> number 2</div> 
                 <div><input type="checkbox"> number 3</div> 
                 <div><input type="checkbox"> number 4</div> 
              </fieldset> 

Answer 1

我已經做了一些細微的修改你的js，請

$(function() { 
    $('#checkAll').on('click', function() { 
    $(document).find(':checkbox').prop('checked', this.checked); 
    }); 
}); 
$(function() { 
    $(".checkall").click(function() { 
    $(this).closest('fieldset').find(':checkbox').prop('checked', this.checked); 
    }); 
}); 

請檢查fiddle的工作示例