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

只要只有一个＆＃34; set＆＃34;页面上有一类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

＆＃13;

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

＆＃13;

<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>

＆＃13;

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

仅选择父div中的复选框

3 个答案: