We Keep Coding

How to dynamic check whether checkbox is in another table Javascript/PHP?

I have two tables, table 1 with the fields of webID, project, web, and I use below PHP code(ThinkPHP framework) to get project list:
$project = M('WebProjectList')->where(array('web' => self::$web))->getField('project', true);
table 2 with the fields of userID, issue, web, project and I use below PHP code to get issue list:
$where['web'] = self::$web;
$where['project'] = array('in', $project);
$issue = M('UserIssue')->where($where)->group('issue')->getField('issue',true);
Below code in .js is the multiple-choice/checkbox of both projects and issues that let user choose, when user choose an issue which does not belong to that project, how to reminder user to check again before submitting?
$('.project2').each(function (index) {
var project = result[index].project;
for (var i in project) {
var item = $('input[value="' + project[i] + '"]');
$(this).find(item).attr('checked', 'checked');
}
});
$('.issue2').each(function (index) {
var issue = result[index].issue;
for (var i in issue) {
var item1 = $('input[value="' + issue[i] + '"]');
$(this).find(item1).attr('checked', 'checked');
}
});
And html code as below:
<th>Project</th>
<td>
<div style="width: 800px" class="project2">
<foreach name="projectlist" item="item">
<label style="display: inline-block">
<input type="checkbox" name="project" style="height: 18px;width: 18px" value="{$item}"/>
{$item}
</label>
</foreach>
<input type="checkbox" name="project" style="display: none" value="all" checked>
</div>
</td>
</tr>
<tr>
<th>Issue</th>
<td>
<div style="width: 800px" class="issue2">
<foreach name="issueList" item="item1">
<label style="display: inline-block">
<input type="checkbox" name="issue" style="height: 18px;width: 18px" value="{$item1}"/>
{$item1}
</label>
</foreach>
<input type="checkbox" name="issue" style="display: none" value="all" checked>
</div>
</td>
</tr>
and the actual html from inspect as below:
$('.project2').each(function(index) {
var project = result[index].project;
for (var i in project) {
var item = $('input[value="' + project[i] + '"]');
$(this).find(item).attr('checked', 'checked');
}
});
$('.issue2').each(function(index) {
var issue = result[index].issue;
for (var i in issue) {
var item1 = $('input[value="' + issue[i] + '"]');
$(this).find(item1).attr('checked', 'checked');
}
});
label {
display: inline-block;
}
input[type=checkbox] {
height: 18px;
width: 18px;
}
<table>
<tbody>
<tr>
<th>project</th>
<td>
<div style="width: 800px" class="project2">
<label>
<input type="checkbox" name="project[]" value="crosserver">
crosserver
</label>
<label>
<input type="checkbox" name="project[]" value="dev">
dev
</label>
<label>
<input type="checkbox" name="project[]" value="ceshi">
ceshi
</label>
<label>
<input type="checkbox" name="project[]" value="klfqios">
klfqios
</label>
<label>
<input type="checkbox" name="project[]" value="banshu">
banshu
</label>
<label>
<input type="checkbox" name="project[]" value="tishen">
tishen
</label>
<label>
<input type="checkbox" name="project[]" value="del">
del
</label>
<label>
<input type="checkbox" name="project[]" value="dyb">
dyb
</label>
<label>
<input type="checkbox" name="project[]" value="kuaiwan">
kuaiwan
</label>
<label>
<input type="checkbox" name="project[]" value="ddleios">
ddleios
</label>
<label>
<input type="checkbox" name="project[]" value="ybguios">
ybguios
</label>
<label>
<input type="checkbox" name="project[]" value="lgybios">
lgybios
</label>
<label>
<input type="checkbox" name="project[]" value="leboios">
leboios
</label>
<label>
<input type="checkbox" name="project[]" value="qpcios">
qpcios
</label>
<input type="checkbox" name="project[]" value="all" checked="">
</div>
</td>
</tr>
<tr>
<th>issue</th>
<td>
<div style="width: 800px" class="issue2">
<label>
<input type="checkbox" name="issue[]" value="cjsgios_lg">
cjsgios_lg
</label>
<label>
<input type="checkbox" name="issue[]" value="dev">
dev
</label>
<label>
<input type="checkbox" name="issue[]" value="dyb_msg">
dyb_msg
</label>
<label>
<input type="checkbox" name="issue[]" value="dyb_msgios">
dyb_msgios
</label>
<label>
<input type="checkbox" name="issue[]" value="dyb_testin_android">
dyb_testin_android
</label>
<label>
<input type="checkbox" name="issue[]" value="dyb_wjlgz_android">
dyb_wjlgz_android
</label>
<label>
<input type="checkbox" name="issue[]" value="huixie_banshu">
huixie_banshu
</label>
<label>
<input type="checkbox" name="issue[]" value="kdmsios_jq">
kdmsios_jq
</label>
<label>
<input type="checkbox" name="issue[]" value="kw_msg">
kw_msg
</label>
<label>
<input type="checkbox" name="issue[]" value="unkonwn">
unkonwn
</label>
<label>
<input type="checkbox" name="issue[]" value="wjlgzios_lg">
wjlgzios_lg
</label>
<label>
<input type="checkbox" name="issue[]" value="zgtxios_ll">
zgtxios_ll
</label>
<label>
<input type="checkbox" name="issue[]" value="zqsgios_Runhero">
zqsgios_Runhero
</label>
<label>
<input type="checkbox" name="issue[]" value="{4ff036a1-3254eafe}">
{4ff036a1-3254eafe}
</label>
<input type="checkbox" name="issue[]" value="all" checked="">
</div>
</td>
</tr>
</tbody>
</table>

How to make checkbox checked on field update

I am making a form with 10 fields with 10 checkboxes. On updating the field i want relevant checkbox to be checked. I can make it work by writing 10 different ON change function but i am looking for a smart way to achieve it instead of writing 10 different ON change functions for respective fields.
<input value="1" name="checkbox-1" id="checkbox-1" type="checkbox"/>
<label for="checkbox-1"></label>
<input type="text" value="" id="field-1" name="field-1">
<label class="form-label">Field 1</label>
<input value="1" name="checkbox-2" id="checkbox-2" type="checkbox"/>
<label for="checkbox-2"></label>
<input type="text" value="" id="field-2" name="field-2">
<label class="form-label">Field 2</label>
<input value="1" name="checkbox-3" id="checkbox-3" type="checkbox"/>
<label for="checkbox-3"></label>
<input type="text" value="" id="field-3" name="field-3">
<label class="form-label">Field 3</label>
$('#field-1').bind('change', () => {
$('#checkbox-1').prop('checked', true);
});
$('#field-2').bind('change', () => {
$('#checkbox-2').prop('checked', true);
});
$('#field-3').bind('change', () => {
$('#checkbox-3').prop('checked', true);
});

I would advise you to use starts-with selector to find all your fields and bind input handlers. Then when you are able to handle it, you have to find appropriate checkbox and check it:
$('input[name^="field-"]').on('input', function(){
let fieldId = $(this).attr('name').slice(-1);
$('#checkbox-'+fieldId).prop('checked', true);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input value="1" name="checkbox-1" id="checkbox-1" type="checkbox"/>
<label for="checkbox-1"></label>
<input type="text" value="" id="field-1" name="field-1">
<label class="form-label">Field 1</label>
<input value="1" name="checkbox-2" id="checkbox-2" type="checkbox"/>
<label for="checkbox-2"></label>
<input type="text" value="" id="field-2" name="field-2">
<label class="form-label">Field 2</label>
<input value="1" name="checkbox-3" id="checkbox-3" type="checkbox"/>
<label for="checkbox-3"></label>
<input type="text" value="" id="field-3" name="field-3">
<label class="form-label">Field 3</label>

Wrap your iinput field and checkbox in a div and then add the logic of checking your checkbox to those wrappers.
$('.checked-input').find('input[type=text]').on('change', function(){
$(this).closest('.checked-input').find('input[type=checkbox]').prop('checked', true);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="checked-input">
<input type="text" value="" id="field-1" name="field-1">
<input value="1" name="checkbox-1" id="checkbox-1" type="checkbox"/>
</div>
<div class="checked-input">
<input type="text" value="" id="field-2" name="field-2">
<input value="1" name="checkbox-2" id="checkbox-2" type="checkbox"/>
</div>

You could group all input which contain field in their id and use the number id to check corresponding checkbox:
$('input[id*=field]').on('change', function() {
$('#checkbox-' + $(this).prop("id").split('-')[1]).prop('checked', true);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input value="1" name="checkbox-1" id="checkbox-1" type="checkbox" />
<label for="checkbox-1"></label>
<input type="text" value="" id="field-1" name="field-1">
<label class="form-label">Field 1</label>
<input value="1" name="checkbox-2" id="checkbox-2" type="checkbox" />
<label for="checkbox-2"></label>
<input type="text" value="" id="field-2" name="field-2">
<label class="form-label">Field 2</label>
<input value="1" name="checkbox-3" id="checkbox-3" type="checkbox" />
<label for="checkbox-3"></label>
<input type="text" value="" id="field-3" name="field-3">
<label class="form-label">Field 3</label>

As an alternative you could tell the input which checkbox to target using a data poperty. I also put an alternate to only check if not empty OR an alternate to find the prior sibling of each.
$('input[type=text]').on('change', function(event) {
let checkpair = $(this).data('targetpair');
$(checkpair).prop('checked', true);
// alternate only if not empty:
//$(checkpair).prop('checked', $(this).val().trim().length);
});
/* alternate that finds the immediate checkbox sibling
$('input[type=text]').on('change', function(event) {
$(this).prevAll('input[type=checkbox]').first().prop('checked', true);
});
*/
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<input value="1" name="checkbox-1" id="checkbox-1" type="checkbox" />
<label for="checkbox-1"></label>
<input type="text" value="" id="field-1" data-targetpair="#checkbox-1" name="field-1">
<label class="form-label">Field 1</label>
<input value="1" name="checkbox-2" id="checkbox-2" type="checkbox" />
<label for="checkbox-2"></label>
<input type="text" value="" id="field-2" data-targetpair="#checkbox-2" name="field-2">
<label class="form-label">Field 2</label>
<input value="1" name="checkbox-3" id="checkbox-3" type="checkbox" />
<label for="checkbox-3"></label>
<input type="text" value="" id="field-3" data-targetpair="#checkbox-3" name="field-3">
<label class="form-label">Field 3</label>

Check the checkboxes between divs

I've a set of checkboxes in a form. Like below,
<div>
<label><input type="checkbox" id="main-dish-9">Id 9</label>
</div>
<div>
<label><input type="checkbox" id="sub-dishes-cuisine-category-12">Id 9</label>
</div>
<div>
<label><input type="checkbox" id="sub-dishes-cuisine-category-17">Id 9</label>
</div>
<div>
<label><input type="checkbox" id="sub-dishes-cuisine-category-18">Id 9</label>
</div>
<div>
<label><input type="checkbox" id="main-dish-12">Id 9</label>
</div>
<div>
<label><input type="checkbox" id="sub-dishes-cuisine-category-11">Id 9</label>
</div>
<div>
<label><input type="checkbox" id="sub-dishes-cuisine-category-21">Id 9</label>
</div>
When a page loads, only the check boxes with the id main-dish are enabled, others are read-only. In this case when I click on the checkbox with an id starting with main-dish, It should make all the checkboxes below it starting with the id sub-dishes to be enabled. If someone checked the main-dish, then it also must select any checkbox with an id starting with sub-dishes.
(jQuery)("input[type='checkbox'][id*='main-dish']", context).click(function () {
(jQuery)("input[type='checkbox'][id*='sub-dishes-cuisine-category']").prop('disabled', true);
})

Use nextUntil() which selects the next elements until it finds the one with the selector of main-dish, this function takes as input a list of elements and selects all elements until the label with a id of main-dish-*,from there we select the checkbox and we toggle the disabled property
$("input[type='checkbox'][id*='sub-dishes-cuisine-category']").prop('disabled', true);
$("input[type='checkbox'][id*='main-dish']").click(function() {
var inputs = $(this).closest('label').nextUntil($("input[type='checkbox'][id*='main-dish']").closest('label')).find('input');
inputs.prop('disabled', !inputs.prop('disabled'));
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label>
<input type="checkbox" id="main-dish-9">Id 9</label>
<label>
<input type="checkbox" id="sub-dishes-cuisine-category-12">Id 9</label>
<label>
<input type="checkbox" id="sub-dishes-cuisine-category-17">Id 9</label>
<label>
<input type="checkbox" id="sub-dishes-cuisine-category-18">Id 9</label>
<label>
<input type="checkbox" id="main-dish-12">Id 9</label>
<label>
<input type="checkbox" id="sub-dishes-cuisine-category-11">Id 9</label>
<label>
<input type="checkbox" id="sub-dishes-cuisine-category-21">Id 9</label>
Demo with wrapped div
$("input[type='checkbox'][id*='sub-dishes-cuisine-category']").prop('disabled', true);
$("input[type='checkbox'][id*='main-dish']").click(function() {
var inputs = $(this).closest('.wrap-input').nextUntil($("input[type='checkbox'][id*='main-dish']").closest('.wrap-input')).find('input');
inputs.prop('disabled', !inputs.prop('disabled'));
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrap-input">
<label>
<input type="checkbox" id="main-dish-9">Id 9</label>
</div>
<div class="wrap-input">
<label>
<input type="checkbox" id="sub-dishes-cuisine-category-12">Id 9</label>
</div>
<div class="wrap-input">
<label>
<input type="checkbox" id="sub-dishes-cuisine-category-17">Id 9</label>
</div>
<div class="wrap-input">
<label>
<input type="checkbox" id="sub-dishes-cuisine-category-18">Id 9</label>
</div>
<div class="wrap-input">
<label>
<input type="checkbox" id="main-dish-12">Id 9</label>
</div>
<div class="wrap-input">
<label>
<input type="checkbox" id="sub-dishes-cuisine-category-11">Id 9</label>
</div>
<div class="wrap-input">
<label>
<input type="checkbox" id="sub-dishes-cuisine-category-21">Id 9</label>
</div>

var selected = [];
$('#checkboxes input:checked').each(function() {
selected.push($(this).attr('name'));
});

By using true you are still disabling the check boxes, it should be set to false
(jQuery)("input[type='checkbox'][id*='sub-dishes-cuisine-category']").prop('disabled', false);

I think simplier way to use class selectors and wrapper.
Html:
<div>
<label> <input type="checkbox" class="main-dish">Id 9 </label>
<label> <input type="checkbox" class="sub-dishes-cuisine" disabled="">Id 9.1 </label>
<label> <input type="checkbox" class="sub-dishes-cuisine" disabled="">Id 9.2 </label>
<label> <input type="checkbox" class="sub-dishes-cuisine" disabled="">Id 9.3 </label>
</div>
<div>
<label> <input type="checkbox" class="main-dish">Id 10 </label>
<label> <input type="checkbox" class="sub-dishes-cuisine" disabled="">Id 10.1 </label>
<label> <input type="checkbox" class="sub-dishes-cuisine" disabled="">Id 10.2 </label>
</div>
JavaScript
$(document).ready(function() {
$(".main-dish").click(function() {
var $inp = $(this).parent().parent().find(">label>.sub-dishes-cuisine");
if ($inp.is("[disabled]")){
$inp.removeAttr('disabled');
} else {
$inp.attr('disabled', true);
}
})
});

Pass selected checkboxes from popup window to text input on a dynamic table

I have a dynamic table the user add's rows to by clicking the Add row button. In the row i have a button 'Select Scope' that opens a new window full of checkbox's I'm trying to get all of the selected checkbox's values to post to a text input in the dynamic table from the parent page. Dynamic Table PicSelect Scope Pic I know that this is possible just using javascript and I feel like I am on the right track from everything that I have read. For whatever reason though it's not passing the checkbox values back to the text input.
Parent Page Code
<h2>Please fill in the information below</h2>
<form action="pmUnitCreate.php" method="post">
<p>Click the Add button to add a new row. Click the Delete button to Delete last row.</p>
<input type="button" id="btnAdd" class="button-add" onClick="addRow('myTable')" value="Add"/>
<input type="button" id="btnDelete" class="button-delete" onClick="deleteRow('myTable')" value="Delete"/>
<br>
<table id="myTable" class="form">
<tr id="heading">
<th><b><font size="4">Job Number</font></b></th>
<th><b><font size="4">Unit Number</font></b></th>
<th><b><font size="4">Job Code</font></b></th>
<th><b><font size="4">Model Number</font></b></th>
<th><b><font size="4">Scope</font></b></th>
</tr>
<tr id="tableRow">
<td>
<input type="text" name="JobNumber[]" value="<?php echo $JobNumber;?>" readonly>
</td>
<td>
<input type="text" name="UnitID[]" value="<?php echo $JobNumber;?>-01" readonly>
</td>
<td>
<select name="JobCode[]" style="background-color:#FFE68C" required>
<option></option>
<option>F</option>
<option>FS</option>
<option>PD</option>
</select>
</td>
<td>
<input type="text" name="ModelNumber[]" style="background-color:#FFE68C" required>
</td>
<td>
<button onclick="ScopeFunction()">Select Scope</button>
<input type"text" name="Scope[]" style="background-color:#FFE68C">
</td>
</tr>
</table>
<script>
function incrementUnitId(unitId) {
var arr = unitId.split('-');
if (arr.length === 1) {return;} // The unit id is not valid;
var number = parseInt(arr[1]) + 1;
return arr[0] + '-' + (number < 10 ? 0 : '') + number;
}
function addRow() {
var row = document.getElementById("tableRow"); // find row to copy
var table = document.getElementById("myTable"); // find table to append to
var clone = row.cloneNode(true); // copy children too
row.id = "oldRow"; // We want to take the last value inserted
clone.cells[1].childNodes[1].value = incrementUnitId(clone.cells[1].childNodes[1].value)
table.appendChild(clone); // add new row to end of table
}
function deleteRow() {
document.getElementById("myTable").deleteRow(-1);
}
var popup;
function SelectScope() {
window.open("http://fisenusa.net/pm/pmSelectScope.php", "_blank", "width=550,height=875");
popup.focus();
}
</script>
EDITED Popup Window Code
<h1>Select Scope</h1>
<h3>Select all that apply</h3>
<form name="childForm" id="updateParent();">
<li><input type="checkbox" name="S1" value="100OA"/><font size="4">100OA</font>
<input type="checkbox" name="S2" value="BTank"/><font size="4">BTank</font>
<input type="checkbox" name="S3" value="WSEcon"/><font size="4">WSEcon</font>
<input type="checkbox" name="S4" value="NetPkg"/><font size="4">NetPkg</font>
<input type="checkbox" name="S5" value="CstmCtrl"/><font size="4">CstmCtrl</font>
<br><br>
<li><input type="checkbox" name="S6" value="CstmRef"/><font size="4">CstmRef</font>
<input type="checkbox" name="S7" value="CstmSM"/><font size="4">CstmSM</font>
<input type="checkbox" name="S8" value="CstmHV"/><font size="4">CstmHV</font>
<input type="checkbox" name="S9" value="CPCTrl"/><font size="4">CPCtrl</font>
<input type="checkbox" name="S10" value="DesiHW"/><font size="4">DesiHW</font>
<br><br>
<li><input type="checkbox" name="S11" value="DigScroll"/><font size="4">DigScroll</font>
<input type="checkbox" name="S12" value="DFGas"/><font size="4">DFGas</font>
<input type="checkbox" name="S13" value="DWall"/><font size="4">DWall</font>
<input type="checkbox" name="S14" value="MZ-DD"/><font size="4">MZ-DD</font>
<input type="checkbox" name="S15" value="DPP"/><font size="4">DPP</font>
<input type="checkbox" name="S16" value="Encl"/><font size="4">Encl</font>
<br><br>
<li><input type="checkbox" name="S17" value="PlateHX"/><font size="4">PlateHX</font>
<input type="checkbox" name="S18" value="ERW"/><font size="4">ERW</font>
<input type="checkbox" name="S19" value="ERWModule"/><font size="4">ERWModule</font>
<input type="checkbox" name="S20" value="ERVMod"/><font size="4">ERVMod </font>
<input type="checkbox" name="S21" value="EvapBP"/><font size="4">EvapBP</font>
<br><br>
<li><input type="checkbox" name="S22" value="PreEvap"/><font size="4">PreEvap</font>
<input type="checkbox" name="S23" value="XP"/><font size="4">XP</font>
<input type="checkbox" name="S24" value="Extended"/><font size="4">Extend</font>
<input type="checkbox" name="S25" value="FanWall"/><font size="4">FanWall</font>
<input type="checkbox" name="S26" value="FillStat"/><font size="4">FillStat</font>
<input type="checkbox" name="S27" value="FFilt"/><font size="4">FFilt</font>
<br><br>
<li><input type="checkbox" name="S28" value="PFilt"/><font size="4">PFilt</font>
<input type="checkbox" name="S29" value="CarbFilt"/><font size="4">CarbFilt</font>
<input type="checkbox" name="S30" value="CustFilt"/><font size="4">CustFilt </font>
<input type="checkbox" name="S31" value="MGH(H)"/><font size="4">MGH(H)</font>
<input type="checkbox" name="S32" value="GHeat"/><font size="4">GHeat</font>
<br><br>
<li><input type="checkbox" name="S33" value="HighStatic"/><font size="4">HighStatic</font>
<input type="checkbox" name="S34" value="HGBP"/><font size="4">HGBP</font>
<input type="checkbox" name="S35" value="HGRH"/><font size="4">HGRH</font>
<input type="checkbox" name="S36" value="HPConv"/><font size="4">HPConv</font>
<input type="checkbox" name="S37" value="GFHumid"/><font size="4">GFHumid</font>
<br><br>
<li><input type="checkbox" name="S38" value="TOHumid"/><font size="4">TOHumid</font>
<input type="checkbox" name="S39" value="MHGRH"/><font size="4">MHGRH</font>
<input type="checkbox" name="S40" value="LowAF"/><font size="4">LowAF</font>
<input type="checkbox" name="S41" value="LowAFSF"/><font size="4">LowAFSF</font>
<input type="checkbox" name="S42" value="LowAmbient"/><font size="4">LowAmbient</font>
<br><br>
<li><input type="checkbox" name="S43" value="MEHeat(R)"/><font size="4">MEHeat(R)</font>
<input type="checkbox" name="S44" value="MEHeat(I)"/><font size="4">MEHeat(I)</font>
<input type="checkbox" name="S45" value="MGH(R)"/><font size="4">MGH(R)</font>
<input type="checkbox" name="S46" value="MGH(H)"/><font size="4">MGH(H)</font>
<input type="checkbox" name="S47" value="MtrRR"/><font size="4">MtrRR</font>
<br><br>
<li><input type="checkbox" name="S48" value="MotorGM"/><font size="4">MotorGM</font>
<input type="checkbox" name="S49" value="MZ-Mod"/><font size="4">MZ-Mod</font>
<input type="checkbox" name="S50" value="NatConv"/><font size="4">NatConv</font>
<input type="checkbox" name="S51" value="OAFMS"/><font size="4">OAFMS</font>
<input type="checkbox" name="S52" value="OSMotor"/><font size="4">OSMotor</font>
<br><br>
<li><input type="checkbox" name="S53" value="MZ-VAV"/><font size="4">MZ-VAV</font>
<input type="checkbox" name="S54" value="Mon"/><font size="4">Mon</font>
<input type="checkbox" name="S55" value="PumpPkg"/><font size="4">PumpPkg</font>
<input type="checkbox" name="S56" value="PipePkg"/><font size="4">PipePkg</font>
<input type="checkbox" name="S57" value="ServLite"/><font size="4">ServLite</font>
<br><br>
<li><input type="checkbox" name="S58" value="SparkRes"/><font size="4">SparkRes</font>
<input type="checkbox" name="S59" value="SSLube"/><font size="4">SSLube</font>
<input type="checkbox" name="S60" value="UVLights"/><font size="4">UVLights</font>
<input type="checkbox" name="S61" value="VSComp"/><font size="4">VSComp</font>
<br><br>
<li><input type="checkbox" name="S62" value="LCVAV"/><font size="4">LCVAV</font>
<input type="checkbox" name="S63" value="XFVAV"/><font size="4">XFVAV</font>
<input type="checkbox" name="S64" value="WCCond"/><font size="4">WCCond</font>
<input type="checkbox" name="S65" value="WSHPConv"/><font size="4">WSHPConv</font>
<input type="checkbox" name="S66" value="3RConv"/><font size="4">3RConv</font>
<br><br>
<li><input type="checkbox" name="S67" value="WiringGM"/><font size="4">WiringGM</font>
<input type="checkbox" name="S68" value="XFan"/><font size="4">XFan</font>
<input type="checkbox" name="S69" value="RFan"/><font size="4">RFan</font>
<input type="checkbox" name="S70" value="SFan"/><font size="4">SFan</font>
<input type="checkbox" name="S71" value="OAHood"/><font size="4">OAHood</font>
<br><br>
<li><input type="checkbox" name="S72" value="XAHood"/><font size="4">XAHood</font>
<input type="checkbox" name="S73" value="XALouver"/><font size="4">XALouver</font>
<input type="checkbox" name="S74" value="OALouver"/><font size="4">OALouver</font>
<input type="checkbox" name="S75" value="SteamCoil"/><font size="4">SteamCoil</font>
<input type="checkbox" name="S76" value="HWCoil"/><font size="4">HWCoil</font>
<br><br>
<li><input type="checkbox" name="S77" value="CHWCoil"/><font size="4">CHWCoil</font>
<input type="checkbox" name="S78" value="CondCoil"/><font size="4">CondCoil</font>
<input type="checkbox" name="S79" value="DXCoil"/><font size="4">DXCoil</font>
<input type="checkbox" name="S80" value="F&BP"/><font size="4">F&BP</font>
<input type="checkbox" name="S81" value="Xfrmr"/><font size="4">Xfrmr</font>
<br><br>
<li><input type="checkbox" name="S82" value="WCCond"/><font size="4">WCCond</font>
<input type="checkbox" name="S83" value="PLFrHX"/><font size="4">PlFrHX</li></font>
<br>
<input type="submit" value="Submit" />
</form>
<script>
function updateParent() {
s = "";
for (i = 0; i < 6; i++)
{
chk = eval("self.document.childForm.t" + i);
if (chk.checked)
s += chk.value + ", ";
}
opener.document.parentForm.toppings.value = s;
self.close();
}
</script>

check all function with outputting labels into a div

i have a group of check boxes and i want to use a check all function but only for the corresponding checkboxes for example if i click checkAll1 it will only highlight checkItem 1 but also will still allow me to check other check boxes.
you will see from the snippet below the code i currently have, i want to also be able to put the checkAll label when it comes out to the #check div to be in a p tag so i can style it.
hope this all makes sense
Many thanks
$("input[type='checkbox']").change(function(){
$("#checked").empty();
$("input[type='checkbox']:checked").each(function(){
$("#checked").html($("#checked").html() + $(this).next().text() + " ");
});
});
<input type="checkbox" id="checkAll1"><label for="checkAll1">Check All</label>
<input type="checkbox" id="checkItem1"> <label for="checkItem1">Item 1</label>
<input type="checkbox" id="checkItem1"><label for="checkItem1">Item 2</label>
<input type="checkbox" id="checkItem1"><label for="checkItem1">Item3</label>
<hr />
<input type="checkbox" id="checkAll2"> <label for="checkAll2">Check All</label>
<input type="checkbox" id="checkItem2"><label for="checkItem2">Item 1</label>
<input type="checkbox" id="checkItem2"><label for="checkItem2">Item 2</label>
<input type="checkbox" id="checkItem2"><label for="checkItem2">Item3</label>
<hr />
<input type="checkbox" id="checkAll3"><label for="checkAll3">Check All</label>
<input type="checkbox" id="checkItem3"><label for="checkItem3">Item 1</label>
<input type="checkbox" id="checkItem3"> <label for="checkItem3">Item 2</label>
<input type="checkbox" id="checkItem3"><label for="checkItem3">Item3</label>
<p>You have selected:</p><div id="checked"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

You can use value to call checkbox, Do something like this..
var chk1 = $("input[type='checkbox'][value='1']");
var chk2 = $("input[type='checkbox'][value='2']");
var chk3 = $("input[type='checkbox'][value='3']");
var chk4 = $("input[type='checkbox'][value='4']");
var chk5 = $("input[type='checkbox'][value='5']");
var chk6 = $("input[type='checkbox'][value='6']");
chk1.on('change', function(){
chk2.prop('checked',this.checked);
});
chk3.on('change', function(){
chk4.prop('checked',this.checked);
});
chk5.on('change', function(){
chk6.prop('checked',this.checked);
});
$("input[type='checkbox']").change(function(){
$("#checked").empty();
$("input[type='checkbox']:checked").each(function(){
$("#checked").html($("#checked").html() + $(this).next().text() + "<p></p>");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" id="checkAll1" value="1"><label for="checkAll1" >Check All</label>
<input type="checkbox" id="checkItem1" value="2"> <label for="checkItem1" >Item 1</label>
<input type="checkbox" id="checkItem1" value="2"><label for="checkItem1" >Item 2</label>
<input type="checkbox" id="checkItem1" value="2"><label for="checkItem1" >Item3</label>
<hr />
<input type="checkbox" id="checkAll2" value="3"> <label for="checkAll2">Check All</label>
<input type="checkbox" id="checkItem2" value="4"><label for="checkItem2">Item 1</label>
<input type="checkbox" id="checkItem2" value="4"><label for="checkItem2">Item 2</label>
<input type="checkbox" id="checkItem2" value="4"><label for="checkItem2">Item3</label>
<hr />
<input type="checkbox" id="checkAll3" value="5"><label for="checkAll3">Check All</label>
<input type="checkbox" id="checkItem3" value="6"><label for="checkItem3">Item 1</label>
<input type="checkbox" id="checkItem3" value="6"> <label for="checkItem3">Item 2</label>
<input type="checkbox" id="checkItem3" value="6"><label for="checkItem3">Item3</label>
<p>You have selected:</p><div id="checked"></div>

I tweak your code a little, and what you mean by able to put the checkAll label when it comes out to the #check div which i did't get it, try this below code :
$("input[type='checkbox']").change(function() {
$("#checked").empty();
$("input[type='checkbox']:checked").each(function() {
$("#checked").html($("#checked").html() + $(this).next().text() + " ");
});
});
$(".checkAll").click(function() {
if ( $(this).is(':checked') )
$(this).siblings(':checkbox').prop('checked', true);
else
$(this).siblings(':checkbox').prop('checked', false);
});
<div>
<!-- add class="checkAll" for checkAll checkbox only -->
<input type="checkbox" id="checkAll1" class="checkAll">
<label for="checkAll1">Check All</label>
<input type="checkbox" id="checkItem1">
<label for="checkItem1">Item 1</label>
<input type="checkbox" id="checkItem1">
<label for="checkItem1">Item 2</label>
<input type="checkbox" id="checkItem1">
<label for="checkItem1">Item3</label>
</div>
<hr />
<div>
<!-- add class="checkAll" for checkAll checkbox only -->
<input type="checkbox" id="checkAll2" class="checkAll">
<label for="checkAll2">Check All</label>
<input type="checkbox" id="checkItem2">
<label for="checkItem2">Item 1</label>
<input type="checkbox" id="checkItem2">
<label for="checkItem2">Item 2</label>
<input type="checkbox" id="checkItem2">
<label for="checkItem2">Item3</label>
</div>
<hr />
<div>
<!-- add class="checkAll" for checkAll checkbox only -->
<input type="checkbox" id="checkAll3" class="checkAll">
<label for="checkAll3">Check All</label>
<input type="checkbox" id="checkItem3">
<label for="checkItem3">Item 1</label>
<input type="checkbox" id="checkItem3">
<label for="checkItem3">Item 2</label>
<input type="checkbox" id="checkItem3">
<label for="checkItem3">Item3</label>
</div>
<p>You have selected:</p>
<div id="checked"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
p/s : like other said, id must be unique for elements

Assign a same class for the same row check boxes
Use the below jquery
$("#checkAll1").change(function(){
$(".checkItem1").prop("checked", true);
});
$("#checkAll2").change(function(){
$(".checkItem2").prop("checked", true);
});
$("#checkAll3").change(function(){
$(".checkItem3").prop("checked", true);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="checkbox" id="checkAll1"><label for="checkAll1">Check All</label>
<input type="checkbox" class="checkItem1"> <label for="checkItem1">Item 1</label>
<input type="checkbox" class="checkItem1"><label for="checkItem1">Item 2</label>
<input type="checkbox" class="checkItem1"><label for="checkItem1">Item3</label>
<hr />
<input type="checkbox" id="checkAll2"> <label for="checkAll2">Check All</label>
<input type="checkbox" class="checkItem2"><label for="checkItem2">Item 1</label>
<input type="checkbox" class="checkItem2"><label for="checkItem2">Item 2</label>
<input type="checkbox" class="checkItem2"><label for="checkItem2">Item3</label>
<hr />
<input type="checkbox" id="checkAll3"><label for="checkAll3">Check All</label>
<input type="checkbox" class="checkItem3"><label for="checkItem3">Item 1</label>
<input type="checkbox" class="checkItem3"> <label for="checkItem3">Item 2</label>
<input type="checkbox" class="checkItem3"><label for="checkItem3">Item3</label>
<p>You have selected:</p><div id="checked"></div>
let me know if it is helpful