javascript - Select All/UnSelect All checkboxes anything under parent DIV -


i doing select all/unselect checkbox. missing 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 / unselect <a id="lnkviewall_drilling" class="nowrap">view 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>

you enclose target 1 div, should use .parents find there common parent should .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() {    // parents    var $parent = $(this).parents(".outer-part");    // create selctor check condition    var checkedselector = this.checked ? ":checked" : ":not(:checked)";    // create selector checkbox exclude select all.    var exluceselector = 'input[type="checkbox"]:not([id^="chk_"])';    // items    var boxes  = $parent.find(exluceselector);    // check if length after filter 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 / unselect <a id="lnkviewall_drilling" class="nowrap">view 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>


Comments

Popular posts from this blog

toolbar - How to add link to user registration inside toobar in admin joomla 3 custom component -

linux - disk space limitation when creating war file -

How to provide Authorization & Authentication using Asp.net, C#? -