CODEWITHSUNDEEP
javascriptjquery
James123
James123

Reputation: 11652

Select All/UnSelect All checkboxes anything under parent DIV

I am doing select all/unselect all checkbox. I am missing something select checkbox in jquery code.

$("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);
    });
  }
});
<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  id="CPDI" name="CPDI" type="checkbox" value="false">
      <input name="CPDI" type="hidden" value="false">Completion Planning
    </div>

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

  </div>

Upvotes: 0

Views: 1572

Answers (5)

Alvaro Montoro
Alvaro Montoro

Reputation: 29655

There are two issues with the code:

  1. The $('.checkbox1').each(function() { is not necessary as there aren't any checkboxes with class checkbox1.
  2. Doing $(this).parent() is not enough because you will only go to the div that is containing the "check all" checkbox, you need to do .parent().parent()

Once that's fixed, it seems to work fine:

$("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>

In order to uncheck/uncheck the Select all checkbox when all/not all the checkboxes are selected, you need to add a listener to each checkbox

$("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>

This could be simplified by using .parents() and removing the if clause and assigning the value directly to the checkboxes as suggested by fuyushimoya (you could probably simplify the selector too, right now it looks ugly).

The resulting code making both changes would look like this:

$("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>

Upvotes: 0

fuyushimoya
fuyushimoya

Reputation: 9813

You enclose the target with one div, so you should use .parents to find there common parent which should be .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>

Upvotes: 2

j08691
j08691

Reputation: 207901

Here's a solution that will work with all the checkboxes (parent and child):

$('#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);
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.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 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  id="DDA" name="DDA" type="checkbox" value="true" />
            <input name="DDA" type="hidden" value="false" />Drilling</div>
    </div>
</div>

Upvotes: 0

legui
legui

Reputation: 192

$("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>

Upvotes: 0

Ji_in_coding
Ji_in_coding

Reputation: 1701

Poor html formatting resulted in human errors.

The following works fine.

$("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

Upvotes: 0

Related Questions