在父DIV下选择全部/取消全选复选框

时间：2015-07-07 19:13:41

标签： javascript jquery

我正在选择全部/取消选中所有复选框。我在jquery代码中遗漏了一些选择复选框。

＆＃13;
＆＃13; 
= {}
＆＃13; 
$("div[id^='divSelectAll'] input[id^='chk_'").click(function() {
  //alert(this.checked);
  if (this.checked) { // check select status
    $(this).parent().find('input[type="checkbox"]').prop('checked', true);
  } else {
    $('.checkbox1').each(function() {
      $(this).parent().find('input[type="checkbox"]').prop('checked', false);
    });
  }
});
＆＃13;
＆＃13;
＆＃13;

5 个答案:

答案 0 :(得分：2)

您将target与div括起来，因此您应该使用.parents查找应该为parent的常见.outer-part。

$("div[id^='divSelectAll'] input[id^='chk_']").click(function() {
  alert(this.checked);
  $(this).parents(".outer-part").find('input[type="checkbox"]').prop('checked', this.checked);
});

$("input[type='checkbox']:not([id^='chk_']").click(function() {
  // Get parents
  var $parent = $(this).parents(".outer-part");
  // Create selctor for check condition
  var checkedSelector = this.checked ? ":checked" : ":not(:checked)";
  // Create selector to get all checkbox exclude select all.
  var exluceSelector = 'input[type="checkbox"]:not([id^="chk_"])';
  // Get items
  var boxes  = $parent.find(exluceSelector);
  // Check if length after filter is the same.
  if (boxes.length === boxes.filter(checkedSelector).length) {
    console.log(this.checked);
    $("input[id^='chk_']").prop('checked', this.checked);
  }
   
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row outer-part col-md-offset-1">
  <div class="col-md-12 TechDiscSelectAll" id="divSelectAll_DRILLING">
    <input id="chk_DRILLING" name="chk_DRILLING" type="checkbox" value="true">
    <input name="chk_DRILLING" type="hidden" value="false">&nbsp; Select All / Unselect All <a id="lnkViewAll_DRILLING" class="NoWrap">View All Descriptions</a>
  </div>

  <div class="row padding-4">
    <div class="col-md-12">
      <input checked="checked" id="CPDI" name="CPDI" type="checkbox" value="true">
      <input name="CPDI" type="hidden" value="false">Completion Planning
    </div>

  </div>
  <div class="row padding-4">
    <div class="col-md-12">
      <input checked="checked" id="DDA" name="DDA" type="checkbox" value="true">
      <input name="DDA" type="hidden" value="false">Drilling
    </div>

  </div>

答案 1 :(得分：0)

代码有两个问题：

  1. $('.checkbox1').each(function() {不是必需的，因为没有任何类复选框复选框。
  2. 仅仅执行$(this).parent()是不够的，因为您只会转到包含“全部选中”复选框的div，您需要执行.parent().parent()

    3. 一旦修复，似乎工作正常：

    $("div[id^='divSelectAll'] input[id^='chk_'").click(function() {
    console.log(this.checked);
    if (this.checked) { // check select status
        $(this).parent().parent().find('input[type="checkbox"]').prop('checked', true);
    } else {
        //$('.checkbox1').each(function () {
            $(this).parent().parent().find('input[type="checkbox"]').prop('checked', false);
       // });
    }
});
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row outer-part col-md-offset-1">
  <div class="col-md-12 TechDiscSelectAll" id="divSelectAll_DRILLING">
    <input id="chk_DRILLING" name="chk_DRILLING" type="checkbox" value="true">
    <input name="chk_DRILLING" type="hidden" value="false">&nbsp; Select All / Unselect All <a id="lnkViewAll_DRILLING" class="NoWrap">View All Descriptions</a>
  </div>

  <div class="row padding-4">
    <div class="col-md-12">
      <input checked="checked" id="CPDI" name="CPDI" type="checkbox" value="true">
      <input name="CPDI" type="hidden" value="false">Completion Planning
    </div>

  </div>
  <div class="row padding-4">
    <div class="col-md-12">
      <input checked="checked" id="DDA" name="DDA" type="checkbox" value="true">
      <input name="DDA" type="hidden" value="false">Drilling
    </div>

  </div>

    为了在选中所有/非全部复选框时取消选中/取消选中全选复选框，您需要为每个复选框添加一个监听器

    $("div[id^='divSelectAll'] input[id^='chk_'").click(function() {
    console.log(this.checked);
    if (this.checked) { // check select status
        $(this).parent().parent().find('input[type="checkbox"]').prop('checked', true);
    } else {
        //$('.checkbox1').each(function () {
            $(this).parent().parent().find('input[type="checkbox"]').prop('checked', false);
       // });
    }
    });

$(".outer-part div:not(div[id^='divSelectAll']) input[type='checkbox']").click(function() {
    if ($(".outer-part div:not(div[id^='divSelectAll']) input[type='checkbox']:checked").length < $(".outer-part div:not(div[id^='divSelectAll']) input[type='checkbox']").length) {
        console.log("not all checked");
        $(this).parent().parent().parent().find("div[id^='divSelectAll'] input[id^='chk_']").prop("checked", false);
    } else {
        console.log("all checked");
        $(this).parent().parent().parent().find("div[id^='divSelectAll'] input[id^='chk_']").prop("checked", true);
    }
});
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row outer-part col-md-offset-1">
  <div class="col-md-12 TechDiscSelectAll" id="divSelectAll_DRILLING">
    <input id="chk_DRILLING" name="chk_DRILLING" type="checkbox" value="true">
    <input name="chk_DRILLING" type="hidden" value="false">&nbsp; Select All / Unselect All <a id="lnkViewAll_DRILLING" class="NoWrap">View All Descriptions</a>
  </div>

  <div class="row padding-4">
    <div class="col-md-12">
      <input checked="checked" id="CPDI" name="CPDI" type="checkbox" value="true">
      <input name="CPDI" type="hidden" value="false">Completion Planning
    </div>

  </div>
  <div class="row padding-4">
    <div class="col-md-12">
      <input checked="checked" id="DDA" name="DDA" type="checkbox" value="true">
      <input name="DDA" type="hidden" value="false">Drilling
    </div>

  </div>

    这可以通过使用.parents()并删除if子句并将值直接分配给fuyushimoya建议的复选框来简化（您现在可能也可以简化选择器）它看起来很难看。

    生成这两项更改的结果代码如下所示：

    $("div[id^='divSelectAll'] input[id^='chk_'").click(function() {
    $(this).parents(".outer-part").find('input[type="checkbox"]').prop('checked', this.checked);
});

$(".outer-part div:not(div[id^='divSelectAll']) input[type='checkbox']").click(function() {
    $(this).parents(".outer-part").find("div[id^='divSelectAll'] input[id^='chk_']").prop("checked", $(".outer-part div:not(div[id^='divSelectAll']) input[type='checkbox']:checked").length == $(".outer-part div:not(div[id^='divSelectAll']) input[type='checkbox']").length);
});
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row outer-part col-md-offset-1">
  <div class="col-md-12 TechDiscSelectAll" id="divSelectAll_DRILLING">
    <input id="chk_DRILLING" name="chk_DRILLING" type="checkbox" value="true">
    <input name="chk_DRILLING" type="hidden" value="false">&nbsp; Select All / Unselect All <a id="lnkViewAll_DRILLING" class="NoWrap">View All Descriptions</a>
  </div>

  <div class="row padding-4">
    <div class="col-md-12">
      <input checked="checked" id="CPDI" name="CPDI" type="checkbox" value="true">
      <input name="CPDI" type="hidden" value="false">Completion Planning
    </div>

  </div>
  <div class="row padding-4">
    <div class="col-md-12">
      <input checked="checked" id="DDA" name="DDA" type="checkbox" value="true">
      <input name="DDA" type="hidden" value="false">Drilling
    </div>

  </div>

答案 2 :(得分：0)

糟糕的HTML格式导致人为错误。

以下工作正常。

$("div[id^='divSelectAll'] input[id^='chk_'").change(function () {
    if (this.checked) { // check select status
        $(this).parent().find('input[type="checkbox"]').prop('checked', true);
    } else {
        $(this).parent().parent().find('input[type="checkbox"]').prop('checked', false);
    }
});

<div class="row outer-part col-md-offset-1">
    <div class="col-md-12 TechDiscSelectAll" id="divSelectAll_DRILLING">
        <input id="chk_DRILLING" name="chk_DRILLING" type="checkbox" value="true">
        <input name="chk_DRILLING" type="hidden" value="false">&nbsp; Select All / Unselect All <a id="lnkViewAll_DRILLING" class="NoWrap">View All Descriptions</a>

    </div>
    <div class="row padding-4">
        <div class="col-md-12">
            <input checked="checked" id="CPDI" name="CPDI" type="checkbox" value="true">
            <input name="CPDI" type="hidden" value="false">Completion Planning</div>
    </div>
    <div class="row padding-4">
        <div class="col-md-12">
            <input checked="checked" id="DDA" name="DDA" type="checkbox" value="true">
            <input name="DDA" type="hidden" value="false">Drilling</div>
    </div>
</div>

JsFiddle

答案 3 :(得分：0)

$("div[id^='divSelectAll'] input[id^='chk_'").click(function() {
  if (this.checked) { // check select status
    $('input[type="checkbox"]').each(function(){$(this).prop('checked', true);});
  } else {
    $('input[type="checkbox"]').each(function(){$(this).prop('checked', false);});
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row outer-part col-md-offset-1">
  <div class="col-md-12 TechDiscSelectAll" id="divSelectAll_DRILLING">
    <input id="chk_DRILLING" name="chk_DRILLING" type="checkbox" value="true">
    <input name="chk_DRILLING" type="hidden" value="false">&nbsp; Select All / Unselect All <a id="lnkViewAll_DRILLING" class="NoWrap">View All Descriptions</a>
  </div>

  <div class="row padding-4">
    <div class="col-md-12">
      <input checked="checked" id="CPDI" name="CPDI" type="checkbox" value="true">
      <input name="CPDI" type="hidden" value="false">Completion Planning
    </div>

  </div>
  <div class="row padding-4">
    <div class="col-md-12">
      <input checked="checked" id="DDA" name="DDA" type="checkbox" value="true">
      <input name="DDA" type="hidden" value="false">Drilling
    </div>

  </div>

答案 4 :(得分：0)

这是一个适用于所有复选框（父级和子级）的解决方案：

i
$('#chk_DRILLING').click(function () {
    $('.row.padding-4 > .col-md-12 > input[type="checkbox"]').prop('checked', $(this).is(':checked'))
})
$('.row.padding-4 > .col-md-12 > input[type="checkbox"]').click(function () {
    var checked = $('.row.padding-4 > .col-md-12 > input[type="checkbox"]:checked').length;
    var total = $('.row.padding-4 > .col-md-12 > input[type="checkbox"]').length;
    if (checked === total) $('#chk_DRILLING').prop({
        'checked': true,
            'indeterminate': false
    });
    if (!checked) $('#chk_DRILLING').prop({
        'checked': false,
            'indeterminate': false
    });
    if (checked > 0 && checked < total) $('#chk_DRILLING').prop('indeterminate', true);
})

相关问题
最新问题