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"> 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"> 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
Post a Comment