仅选择父 div 中的复选框

Question

我正在尝试将一些 jQuery 应用于复选框，但仅限于最近的 div。

我有一个 x 动态创建的复选框列表 - 如果所有复选框都是空白的，那么我希望它们都显示为已选中。

HTML

<div class="col-lg-6">
    <label class="checkbox-inline"><input type="checkbox" name="permissions[]" class="perm limitall" value="1">1</label>
    <label class="checkbox-inline"><input type="checkbox" name="permissions[]" class="perm limitall" value="2">2</label>
    <label class="checkbox-inline"><input type="checkbox" name="permissions[]" class="perm limitall" value="3">3</label>
</div>

$(document).ready(function () {
  if ($('.limitall:checkbox:checked').length == 0){
    $('.limitall').prop('checked', true);
  }
  $(".limitall").change(function(){
    if ($('.limitall:checkbox:checked').length == 0){
      $('.limitall').prop('checked', true);
    }
  });
});

只要页面上只有一组具有 limitall 类的“一组”项目，它就可以正常工作 - 如果有更多，那么这会将两个组视为一组，并且只有在所有 10 个都是空白的情况下才有效。

如果我有：

<div class="col-lg-6">
    <label class="checkbox-inline"><input type="checkbox" name="permissions[]" class="perm limitall" value="1">1</label>
    <label class="checkbox-inline"><input type="checkbox" name="permissions[]" class="perm limitall" value="2">2</label>
    <label class="checkbox-inline"><input type="checkbox" name="permissions[]" class="perm limitall" value="3">3</label>
</div>

<div class="col-lg-6">
    <label class="checkbox-inline"><input type="checkbox" name="permissions2[]" class="perm2 limitall" value="1">1</label>
    <label class="checkbox-inline"><input type="checkbox" name="permissions2[]" class="perm2 limitall" value="2">2</label>
    <label class="checkbox-inline"><input type="checkbox" name="permissions2[]" class="perm2 limitall" value="3">3</label>
</div>

这将其视为一组 6 而不是 2 组 3 - 我如何确保不会发生这种情况并且每组都被独立处理？

上面的 HTML 结构将始终适用，因此复选框始终位于一个标签内，该标签位于一个带有 col-lg-6 类的 div 内，但输入的名称是动态设置的，所以我不能使用它

https://jsfiddle.net/3dgo3Laz/2/

Answer 1

$(document).ready(function () {
  checkedBox($(".col-lg-6.Active"))
  $(".col-lg-6.Active  input:checkbox").on("change", function () {
    checkedBox($(this).parent().parent());
    });
});

function checkedBox(Element) {
  $.each(Element, function (index, value) {
  var hasCheked = false;
  if ($(value).find('input:checkbox').is(":checked"))
      hasCheked = true;
  if (!hasCheked)
     $(value).find(' input:checkbox').prop('checked', true);
   });
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <div class="col-lg-6 Active">
        <label class="checkbox-inline"><input type="checkbox" name="permissions[]" class="perm limitall" value="1">1</label>
        <label class="checkbox-inline"><input type="checkbox" name="permissions[]" class="perm limitall" value="2">2</label>
        <label class="checkbox-inline"><input type="checkbox" name="permissions[]" class="perm limitall" value="3">3</label>
    </div>
    <div class="col-lg-6">
        <label class="checkbox-inline"><input type="checkbox" name="permissions2[]" class="perm limitall" value="1">1</label>
        <label class="checkbox-inline"><input type="checkbox" name="permissions2[]" checked class="perm limitall" value="2">2</label>
        <label class="checkbox-inline"><input type="checkbox" name="permissions2[]"  class="perm limitall" value="3">3</label>
    </div>
    <div class="col-lg-6 Active">
        <label class="checkbox-inline"><input type="checkbox" name="permissions3[]" class="perm limitall" value="1">1</label>
        <label class="checkbox-inline"><input type="checkbox" name="permissions3[]" class="perm limitall" value="2">2</label>
        <label class="checkbox-inline"><input type="checkbox" name="permissions3[]" checked class="perm limitall" value="3">3</label>
    </div>

Answer 2

你可以给你的divs 和 id 或一个特殊的类，并定位div 中的复选框。例如：

<div class="col-lg-6" id="checkboxes-1">
    <label class="checkbox-inline"><input type="checkbox" name="permissions[]" class="perm limitall" value="1">1</label>
    <label class="checkbox-inline"><input type="checkbox" name="permissions[]" class="perm limitall" value="2">2</label>
    <label class="checkbox-inline"><input type="checkbox" name="permissions[]" class="perm limitall" value="3">3</label>
</div>

<div class="col-lg-6" id="checkboxes-2">
    <label class="checkbox-inline"><input type="checkbox" name="permissions2[]" class="perm2 limitall" value="1">1</label>
    <label class="checkbox-inline"><input type="checkbox" name="permissions2[]" class="perm2 limitall" value="2">2</label>
    <label class="checkbox-inline"><input type="checkbox" name="permissions2[]" class="perm2 limitall" value="3">3</label>
</div>

这样，您可以将选择器更改为：

$(document).ready(function () {
  if ($('#checkboxes-1 .limitall:checkbox:checked').length == 0){
    $('#checkboxes-1 .limitall').prop('checked', true);
  }
  $("#checkboxes-1 .limitall").change(function(){
    if ($('#checkboxes-1 .limitall:checkbox:checked').length == 0){
      $('#checkboxes-1 .limitall').prop('checked', true);
    }
  });
});

Answer 3

您可以遍历所有.col-lg-6 元素并设置唯一的ID。您还可以将事件处理逻辑移动到通用函数中。

$(".col-lg-6").each(function(idx) {
    var id = 'someidentifier' + idx
    $(this).attr('id', id);
    handleEvents(id);
});

var handleEvents = function(id) {

   $('#' + id + ' .limitall').change(function(){
      /*your logic*/
    }); 
}