How to get JSON data from HTML form with backbone js - javascript

I am creating a dynamic form in a Backbone.js view. I want to get all the JSON data from the form in my view without using jQuery. Is there any way to get the data?
For example: When You check the checkbox, I only want the data for the checked field.
<table class="table">
<thead>
<tr>
<th></th>
<th>{{labels.selectImage}}</th>
<th>{{labels.nameVisibleToShop}}</th>
<th>{{labels.sourceCode}}</th>
<th>{{labels.pricePerItem}}</th>
</tr>
</thead>
<tbody>
<tr id ="school-imageId-{{categoryImage.cmsId}}">
<td><input type="checkbox" class="form-control mz-embrodiary-enable"/></td>
<td><img width="40px" src="{{categoryImage.imageUrl}}" /></td>
<td>
<input type="text" name="name" class="form-control" placeholder="{{labels.nameVisibleToShop}}" disabled/>
<span class="mz-validationmessage hidden" data-mz-validationmessage-for="name">{{labels.genericRequired}}</span>
</td>
<td>
<input type="text" name="sourceCode" class="form-control" placeholder="{{labels.sourceCode}}" disabled/>
<span class="mz-validationmessage hidden" data-mz-validationmessage-for="name">{{labels.genericRequired}}</span>
</td>
<td>
<input type="text" name="price" class="form-control" placeholder="{{labels.enterPrice}}" disabled/>
<span class="mz-validationmessage hidden" data-mz-validationmessage-for="price">{{labels.genericRequired}}</span>
</td>
</tr>
<tr id ="school-imageId-{{categoryImage.cmsId}}">
<td><input type="checkbox" class="form-control mz-embrodiary-enable"/></td>
<td><img width="40px" src="{{categoryImage.imageUrl}}" /></td>
<td>
<input type="text" name="name" class="form-control" placeholder="{{labels.nameVisibleToShop}}" disabled/>
<span class="mz-validationmessage hidden" data-mz-validationmessage-for="name">{{labels.genericRequired}}</span>
</td>
<td>
<input type="text" name="sourceCode" class="form-control" placeholder="{{labels.sourceCode}}" disabled/>
<span class="mz-validationmessage hidden" data-mz-validationmessage-for="name">{{labels.genericRequired}}</span>
</td>
<td>
<input type="text" name="price" class="form-control" placeholder="{{labels.enterPrice}}" disabled/>
<span class="mz-validationmessage hidden" data-mz-validationmessage-for="price">{{labels.genericRequired}}</span>
</td>
</tr>
<tr id ="school-imageId-{{categoryImage.cmsId}}">
<td><input type="checkbox" class="form-control mz-embrodiary-enable"/></td>
<td><img width="40px" src="{{categoryImage.imageUrl}}" /></td>
<td>
<input type="text" name="name" class="form-control" placeholder="{{labels.nameVisibleToShop}}" disabled/>
<span class="mz-validationmessage hidden" data-mz-validationmessage-for="name">{{labels.genericRequired}}</span>
</td>
<td>
<input type="text" name="sourceCode" class="form-control" placeholder="{{labels.sourceCode}}" disabled/>
<span class="mz-validationmessage hidden" data-mz-validationmessage-for="name">{{labels.genericRequired}}</span>
</td>
<td>
<input type="text" name="price" class="form-control" placeholder="{{labels.enterPrice}}" disabled/>
<span class="mz-validationmessage hidden" data-mz-validationmessage-for="price">{{labels.genericRequired}}</span>
</td>
</tr>
</tbody>
</table>

Related

Reading data from tr with an id inside the tbody

I am trying to read data from input field inside "td" with an id inside the "tbody"
The html structure is like this:
<tbody id="tbody1">
<tr>
<td>
<input type="text" id="bacthNo" class="form-control md-has-value" required="">
</td>
<td>
<input type="text" id="location" class="form-control md-has-value" required="">
</td>
<td>
<input type="text" id="qty" class="form-control md-has-value" required="">
</td>
</tr>
<tr>
<td>
<input type="text" id="bacthNo" class="form-control md-has-value" required="" value="0">
</td>
<td>
<input type="text" id="location" class="form-control md-has-value" required="" value="0">
</td>
<td>
<input type="text" id="qty" class="form-control md-has-value" required="" value="0">
</td>
</tr>
</tbody>
<tbody id="tbody2">
<tr>
<td>
<input type="text" id="bacthNo" class="form-control md-has-value" required="">
</td>
<td>
<input type="text" id="location" class="form-control md-has-value" required="">
</td>
<td>
<input type="text" id="qty" class="form-control md-has-value" required="">
</td>
</tr>
<tr>
<td>
<input type="text" id="bacthNo" class="form-control md-has-value" required="" value="0">
</td>
<td>
<input type="text" id="location" class="form-control md-has-value" required="" value="0">
</td>
<td>
<input type="text" id="qty" class="form-control md-has-value" required="" value="0">
</td>
</tr>
</tbody>
Here the "tbody" id is changing dynamically and tr can be in between 1 to 10 for each "tbody".
What i want is to read all the data of "bacthNo","location" and "qty" for each tbody and push into an array on form submit. I had tried several approach but not able to fetch data from this complicated form.
Kindly Help.

apply class to all of your fields and then access using each function of jquery like this
<tr>
<td>
<input type="text" id="bacthNo" class="bacthNo form-control md-has-value" required="">
</td>
<td>
<input type="text" id="location" class="location form-control md-has-value" required="">
</td>
<td>
<input type="text" id="qty" class="qty form-control md-has-value" required="">
</td>
$('#tbody1').find('tr').each(function () {
var eachtr = $(this);
eachtr.find('.bacthNo').val();
eachtr.find('.location').val();
eachtr.find('.qty').val();
//get your all fields
}
for example see this jsfiddle

$('#tblOne > tbody > tr').each(function() {
alert($(this).find("td:first>input").val());
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="tblOne">
<tbody id="tbody1">
<tr>
<td>
<input type="text" id="bacthNo" class="form-control md-has-value" required="">
</td>
<td>
<input type="text" id="location" class="form-control md-has-value" required="">
</td>
<td>
<input type="text" id="qty" class="form-control md-has-value" required="">
</td>
</tr>
<tr>
<td>
<input type="text" id="bacthNo" class="form-control md-has-value" required="" value="0">
</td>
<td>
<input type="text" id="location" class="form-control md-has-value" required="" value="0">
</td>
<td>
<input type="text" id="qty" class="form-control md-has-value" required="" value="0">
</td>
</tr>
</tbody>
<tbody id="tbody2">
<tr>
<td>
<input type="text" id="bacthNo" class="form-control md-has-value" required="">
</td>
<td>
<input type="text" id="location" class="form-control md-has-value" required="">
</td>
<td>
<input type="text" id="qty" class="form-control md-has-value" required="">
</td>
</tr>
<tr>
<td>
<input type="text" id="bacthNo" class="form-control md-has-value" required="" value="0">
</td>
<td>
<input type="text" id="location" class="form-control md-has-value" required="" value="0">
</td>
<td>
<input type="text" id="qty" class="form-control md-has-value" required="" value="0">
</td>
</tr>
</tbody>
</table>

something like this:
document.addEventListener("DOMContentLoaded", function (event) {
var _rows = document.querySelectorAll('table tr');
//depending on your markup you could use also:
// var _rows = document.querySelectorAll('tr');
// var _rows = document.querySelectorAll('tbody tr');
//or THE WORST CASE if you cannot really change your html:
//document.querySelectorAll('tbody[id*="tbody"] tr');
_rows.forEach(function (row) {
var _bacthNo = row.querySelector('#bacthNo');
var _location = row.querySelector('#location');
var _qty = row.querySelector('#qty');
console.log(_bacthNo.value)
console.log(_location.value)
console.log(_qty.value)
});
});
<table>
<tbody id="tbody1">
<tr>
<td>
<input type="text" id="bacthNo" class="form-control md-has-value" required="">
</td>
<td>
<input type="text" id="location" class="form-control md-has-value" required="">
</td>
<td>
<input type="text" id="qty" class="form-control md-has-value" required="">
</td>
</tr>
<tr>
<td>
<input type="text" id="bacthNo" class="form-control md-has-value" required="" value="0">
</td>
<td>
<input type="text" id="location" class="form-control md-has-value" required="" value="0">
</td>
<td>
<input type="text" id="qty" class="form-control md-has-value" required="" value="0">
</td>
</tr>
</tbody>
<tbody id="tbody2">
<tr>
<td>
<input type="text" id="bacthNo" class="form-control md-has-value" required="">
</td>
<td>
<input type="text" id="location" class="form-control md-has-value" required="">
</td>
<td>
<input type="text" id="qty" class="form-control md-has-value" required="">
</td>
</tr>
<tr>
<td>
<input type="text" id="bacthNo" class="form-control md-has-value" required="" value="0">
</td>
<td>
<input type="text" id="location" class="form-control md-has-value" required="" value="0">
</td>
<td>
<input type="text" id="qty" class="form-control md-has-value" required="" value="0">
</td>
</tr>
</tbody>
</table>

Enabling form fields in case of minor

form field screenshot
I am collecting nominees data from users for nomination in my organization. The form fields have been attached as image for your reference.
I use iondatepicker for the date field. In case the date of birth chosen by the users for the nominee works out to be the age of a minor i want the fields of the minors' guardian data to be enabled. else they should remain as disabled or with the value 'NA'. Please find below the codes for the form fields.
<table>
<tr>
<td>
<div id="result-1">
<input style="width: 600px;" type="text" value="" name="dob" id="mydate"
data-lang="en" data-years="1925-2018" size="10" maxlength="10"
placeholder='date of birth of nominee (dd/mm/yyyy)' data-format="DD/MM/YYYY"
class="form-control"/>
</div>
</td>
</tr>
<tr>
<td style="text-align: left;">
<b>If Nominee is a Minor, give
GUARDIAN's Particulars</b>
</td>
</tr>
<tr>
<td>
<input style="width: 600px;"
type="text" name="g_name" id="g_name" size="30" maxlength="200"
placeholder='Guardian Name' class="form-control"/>
</td>
</tr>
<tr>
<td>
<input style="width: 600px;"
type="text" name="g_relation" id="g_relation" size="30" maxlength="200"
placeholder='Guardian Relationship with you' class="form-control"/>
</td>
</tr>
<tr>
<td>
<input style="width: 600px;"
type="text" name="g_address" id="g_address" size="30" maxlength="200"
placeholder='Guardian Address' class="form-control"/>
</td>
</tr>
</table>

You can try following solution (assuming you are not using any libraries like jQuery or moment.js, it's in plain javascript):
var myDate = document.getElementById('mydate')
myDate.addEventListener('change', function(e){
var val = e.target.value
var date = new Date(val)
if ( isNaN( date.getDate()) ){
alert('Wrong date format!')
return;
}
var compareDate = new Date()
compareDate.setFullYear(compareDate.getFullYear()-18)
if(compareDate < date){
document.getElementById('g_name').value=""
document.getElementById('g_relation').value=""
document.getElementById('g_address').value=""
document.getElementById('g_name').disabled=false
document.getElementById('g_relation').disabled=false
document.getElementById('g_address').disabled=false
}else{
document.getElementById('g_name').value="NA"
document.getElementById('g_relation').value="NA"
document.getElementById('g_address').value="NA"
document.getElementById('g_name').disabled=true
document.getElementById('g_relation').disabled=true
document.getElementById('g_address').disabled=true
}
})
<table>
<tr>
<td>
<div id="result-1">
<input style="width: 600px;" type="text" value="" name="dob" id="mydate"
data-lang="en" data-years="1925-2018" size="10" maxlength="10"
placeholder='date of birth of nominee (dd/mm/yyyy)' data-format="DD/MM/YYYY"
class="form-control"/>
</div>
</td>
</tr>
<tr>
<td style="text-align: left;">
<b>If Nominee is a Minor, give
GUARDIAN's Particulars</b>
</td>
</tr>
<tr>
<td>
<input style="width: 600px;"
type="text" name="g_name" id="g_name" size="30" maxlength="200" disabled
placeholder='Guardian Name' class="form-control"/>
</td>
</tr>
<tr>
<td>
<input style="width: 600px;"
type="text" name="g_relation" id="g_relation" size="30" maxlength="200" disabled
placeholder='Guardian Relationship with you' class="form-control"/>
</td>
</tr>
<tr>
<td>
<input style="width: 600px;"
type="text" name="g_address" id="g_address" size="30" maxlength="200" disabled
placeholder='Guardian Address' class="form-control"/>
</td>
</tr>
</table>

Send data out of visible form only

I have two divs containing same input fields. When I enter the vales in both the div fields, all the values get submitted. what I want is, only the value of selected div (using radio button) should pass. Any help will be appreciated :-)
$(document).ready(function() {
console.log('called');
$('input[type=radio][name=cancel_policy]').change(function() {
if (this.value == '0') {
$("#fixedPolicyDiv").css("display", "block");
$("#percentagePolicyDiv").css("display", "none");
$("#percentagePolicyDiv").get(0).reset();
} else if (this.value == '1') {
$("#fixedPolicyDiv").css("display", "none");
$("#fixedPolicyDiv").get(0).reset();
$("#percentagePolicyDiv").css("display", "block");
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<label class="custom-control custom-control-primary custom-radio">
<input class="custom-control-input" type="radio" name="cancel_policy" value="0"> <span class="custom-control-indicator"></span>
<span class="custom-control-label">Fixed price</span>
</label>
<label class="custom-control custom-control-primary custom-radio">
<input class="custom-control-input" type="radio" name="cancel_policy" value="1"> <span class="custom-control-indicator"></span>
<span class="custom-control-label">Percentage wise</span>
</label>
<div id="fixedPolicyDiv" style="display:none;">
<div class="form-group">
<div class="col-lg-11 col-lg-offset-1">
<div class="table-responsive">
<table class="table" id='cancel_tbl'>
<tr>
<td width='30%'>Days</td>
<td width='30%'>Amount</td>
<td> </td>
</tr>
<tr>
<td>
<input type="number" name="cancel_policy_days[]" class="form-control" placeholder="days" value="<?= set_value('cancel_policy_days[]') ?>" required="required" />
</td>
<td>
<input type="number" name="cancel_policy_amount[]" class="form-control" placeholder="cancellation amount" value="<?= set_value('cancel_policy_amount[]') ?>" required="required" />
</td>
<td> </td>
</tr>
<tr>
<td colspan="6" align="center">
<input type="button" value="Add More" id="cancel_addmorebtn1" class="btn btn-outline-info">
</td>
</tr>
</table>
</div>
</div>
</div>
</div>
<div id="percentagePolicyDiv" style="display:none;">
<div class="form-group">
<div class="col-lg-11 col-lg-offset-1">
<div class="table-responsive">
<table class="table" id='cancel_tb2'>
<tr>
<td width='30%'>Days</td>
<td width='30%'>Percentage</td>
<td> </td>
</tr>
<tr>
<td>
<input type="number" name="cancel_policy_days[]" class="form-control" placeholder="days" value="<?= set_value('cancel_policy_days[]') ?>" required="required" />
</td>
<td>
<input type="number" name="cancel_policy_amount[]" class="form-control" placeholder="cancellation percentage" value="<?= set_value('cancel_policy_amount[]') ?>" required="required" />
</td>
<td> </td>
</tr>
<tr>
<td colspan="6" align="center">
<input type="button" value="Add More" id="cancel_addmorebtn2" class="btn btn-outline-info">
</td>
</tr>
</table>
</div>
</div>
</div>
</div>

You can add the disabled property to the inputs you do not want to sent.
for exemple :
$("#percentagePolicyDiv").find('input').prop('disabled');

If reset() is not only JS method you accept, we can make it with setting value of input fields such way:
$(document).ready(function() {
console.log('called');
$('input[type=radio][name=cancel_policy]').change(function() {
if (this.value == '0') {
$("#percentagePolicyDiv").find('input').val('');
$("#fixedPolicyDiv").css("display", "block");
$("#percentagePolicyDiv").css("display", "none");
} else if (this.value == '1') {
$("#fixedPolicyDiv").find('input').val('');
$("#fixedPolicyDiv").css("display", "none");
$("#percentagePolicyDiv").css("display", "block");
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<label class="custom-control custom-control-primary custom-radio">
<input class="custom-control-input" type="radio" name="cancel_policy" value="0"> <span class="custom-control-indicator"></span>
<span class="custom-control-label">Fixed price</span>
</label>
<label class="custom-control custom-control-primary custom-radio">
<input class="custom-control-input" type="radio" name="cancel_policy" value="1"> <span class="custom-control-indicator"></span>
<span class="custom-control-label">Percentage wise</span>
</label>
<div id="fixedPolicyDiv" style="display:none;">
<div class="form-group">
<div class="col-lg-11 col-lg-offset-1">
<div class="table-responsive">
<table class="table" id='cancel_tbl'>
<tr>
<td width='30%'>Days</td>
<td width='30%'>Amount</td>
<td> </td>
</tr>
<tr>
<td>
<input type="number" name="cancel_policy_days[]" class="form-control" placeholder="days" value="<?= set_value('cancel_policy_days[]') ?>" required="required" />
</td>
<td>
<input type="number" name="cancel_policy_amount[]" class="form-control" placeholder="cancellation amount" value="<?= set_value('cancel_policy_amount[]') ?>" required="required" />
</td>
<td> </td>
</tr>
<tr>
<td colspan="6" align="center">
<input type="button" value="Add More" id="cancel_addmorebtn1" class="btn btn-outline-info">
</td>
</tr>
</table>
</div>
</div>
</div>
</div>
<div id="percentagePolicyDiv" style="display:none;">
<div class="form-group">
<div class="col-lg-11 col-lg-offset-1">
<div class="table-responsive">
<table class="table" id='cancel_tb2'>
<tr>
<td width='30%'>Days</td>
<td width='30%'>Percentage</td>
<td> </td>
</tr>
<tr>
<td>
<input type="number" name="cancel_policy_days[]" class="form-control" placeholder="days" value="<?= set_value('cancel_policy_days[]') ?>" required="required" />
</td>
<td>
<input type="number" name="cancel_policy_amount[]" class="form-control" placeholder="cancellation percentage" value="<?= set_value('cancel_policy_amount[]') ?>" required="required" />
</td>
<td> </td>
</tr>
<tr>
<td colspan="6" align="center">
<input type="button" value="Add More" id="cancel_addmorebtn2" class="btn btn-outline-info">
</td>
</tr>
</table>
</div>
</div>
</div>
</div>
Otherwise you should implement desired ID to <form> elements.
formObject.reset() is JS method of FORM-object

Frozen Columns Vertical Scroll Issue

FIDDLE
I have written code to keep fixed first 2 columns & other columns are horizontally scrollable.
My problem is, I want a fixed height set to the table so that it is vertically also scrollable.
<div class="table-responsive" style="width: 400px; overflow-x:scroll; margin-left:354px;">
<table class="table table-bordered" border="1">
<thead>
<tr class="tblHeadings">
<th class="fixCol1 headCol">
<div style="height: 40px;padding-top: 19px;">Code</div>
</th>
<th class="fixCol2 headCol">
<div style="height: 40px;padding-top: 19px;">Name</div>
</th>
<th style="width:120px;height: 54px;">Days
<input type="hidden" name="monthlyField" value="LD">
</th>
<th style="width:120px;height: 54px;">EARNG1
<input type="hidden" name="monthlyField" value="EARNG1">
</th>
<th style="width:120px;height: 54px;">EARNG2
<input type="hidden" name="monthlyField" value="EARNG2">
</th>
<th style="width:100px">Action</th>
</tr>
</thead>
<tbody>
<tr>
<td class="fixCol1">GT001
<input type="hidden" name="empID" value="1">
<input type="hidden" name="empCode" value="GT001">
</td>
<td class="fixCol2">Brock</td>
<td>
<input type="number" max="31" step="0.01" value="" name="1|LD" class="form-control tdTextboxes">
</td>
<td>
<input type="number" step="0.01" value="" name="1|WEEKOFF_DAYS" class="form-control tdTextboxes">
</td>
<td>
<input type="number" step="0.01" value="" name="1|EARNG1" class="form-control tdTextboxes">
</td>
<td>
<input type="number" step="0.01" value="" name="1|EARNG2" class="form-control tdTextboxes">
</td>
<td>
<input type="number" step="0.01" value="" name="1|EARNG3" class="form-control tdTextboxes">
</td>
<td>
<input type="number" step="0.01" value="" name="1|EARNG4" class="form-control tdTextboxes">
</td>
<td>
<input type="number" step="0.01" value="" name="1|EARNG5" class="form-control tdTextboxes">
</td>
<td>
<button class="btn pr-btn-black-sm" type="button" onclick="deleteRecord(this,'1')">Delete</button>
</td>
</tr>
<tr>
<td class="fixCol1">GT002
<input type="hidden" name="empID" value="2">
<input type="hidden" name="empCode" value="GT002">
</td>
<td class="fixCol2">John</td>
<td>
<input type="number" max="31" step="0.01" value="" name="2|LD" class="form-control tdTextboxes">
</td>
<td>
<input type="number" step="0.01" value="" name="2|WEEKOFF_DAYS" class="form-control tdTextboxes">
</td>
<td>
<input type="number" step="0.01" value="" name="2|EARNG1" class="form-control tdTextboxes">
</td>
<td>
<input type="number" step="0.01" value="" name="2|EARNG2" class="form-control tdTextboxes">
</td>
<td>
<input type="number" step="0.01" value="" name="2|EARNG3" class="form-control tdTextboxes">
</td>
<td>
<input type="number" step="0.01" value="" name="2|EARNG4" class="form-control tdTextboxes">
</td>
<td>
<input type="number" step="0.01" value="" name="2|EARNG5" class="form-control tdTextboxes">
</td>
<td>
<button class="btn pr-btn-black-sm" type="button" onclick="deleteRecord(this,'2')">Delete</button>
</td>
</tr>
<tr>
<td class="fixCol1">GT003
<input type="hidden" name="empID" value="3">
<input type="hidden" name="empCode" value="GT003">
</td>
<td class="fixCol2">Walker Ross</td>
<td>
<input type="number" max="31" step="0.01" value="" name="3|LD" class="form-control tdTextboxes">
</td>
<td>
<input type="number" step="0.01" value="" name="3|WEEKOFF_DAYS" class="form-control tdTextboxes">
</td>
<td>
<button class="btn pr-btn-black-sm" type="button" onclick="deleteRecord(this,'3')">Delete</button>
</td>
</tr>
</tbody>
</table>

Since it looks like you're using Bootstrap, I took the liberty to make a Bootply demo of what you're trying to achieve.
You already had the solution really, the only thing was to apply fixed height to the table-responsive class rather than to the table class.
So I simply added height:200px; to the right class (btw, in general try to avoid in-line styling).

CheckBoxList - check all

I have CheckBoxList when I have one default value called "Select All" and rest items binded from database:
<asp:CheckBoxList runat="server" ID="chkBxLstSystemTypes" CssClass="chkBxList" RepeatDirection="Horizontal" RepeatColumns="10" TabIndex="2">
<asp:ListItem Value="SelectAll">Select All</asp:ListItem>
I would like to have JavaScript or jQuery function which will check all check boxes when user clicks "Select all" and deselect the check boxes when user deselects the "Select All".
-- EDIT 1
Rendered HTML:
<table id="ctl00_MainContent_chkBxLstSystemTypes" class="chkBxList" border="0">
<tr>
<td>
<input id="ctl00_MainContent_chkBxLstSystemTypes_0" type="checkbox" name="ctl00$MainContent$chkBxLstSystemTypes$0" tabindex="2" />
<label for="ctl00_MainContent_chkBxLstSystemTypes_0">Select All</label>
</td>
<td>
<input id="ctl00_MainContent_chkBxLstSystemTypes_1" type="checkbox" name="ctl00$MainContent$chkBxLstSystemTypes$1" tabindex="2" />
<label for="ctl00_MainContent_chkBxLstSystemTypes_1">ASG</label>
</td>
<td>
<input id="ctl00_MainContent_chkBxLstSystemTypes_2" type="checkbox" name="ctl00$MainContent$chkBxLstSystemTypes$2" tabindex="2" />
<label for="ctl00_MainContent_chkBxLstSystemTypes_2">AVP</label>
</td>
<td>
<input id="ctl00_MainContent_chkBxLstSystemTypes_3" type="checkbox" name="ctl00$MainContent$chkBxLstSystemTypes$3" tabindex="2" />
<label for="ctl00_MainContent_chkBxLstSystemTypes_3">CDR</label>
</td>
<td>
<input id="ctl00_MainContent_chkBxLstSystemTypes_4" type="checkbox" name="ctl00$MainContent$chkBxLstSystemTypes$4" tabindex="2" />
<label for="ctl00_MainContent_chkBxLstSystemTypes_4">CMS</label>
</td>
<td>
<input id="ctl00_MainContent_chkBxLstSystemTypes_5" type="checkbox" name="ctl00$MainContent$chkBxLstSystemTypes$5" tabindex="2" />
<label for="ctl00_MainContent_chkBxLstSystemTypes_5">CUCM_Logins</label>
</td>
<td>
<input id="ctl00_MainContent_chkBxLstSystemTypes_6" type="checkbox" name="ctl00$MainContent$chkBxLstSystemTypes$6" tabindex="2" />
<label for="ctl00_MainContent_chkBxLstSystemTypes_6">CUCM_Subscribers</label>
</td>
<td>
<input id="ctl00_MainContent_chkBxLstSystemTypes_7" type="checkbox" name="ctl00$MainContent$chkBxLstSystemTypes$7" tabindex="2" />
<label for="ctl00_MainContent_chkBxLstSystemTypes_7">Cybertech</label>
</td>
<td>
<input id="ctl00_MainContent_chkBxLstSystemTypes_8" type="checkbox" name="ctl00$MainContent$chkBxLstSystemTypes$8" tabindex="2" />
<label for="ctl00_MainContent_chkBxLstSystemTypes_8">eHealth</label>
</td>
<td>
<input id="ctl00_MainContent_chkBxLstSystemTypes_9" type="checkbox" name="ctl00$MainContent$chkBxLstSystemTypes$9" tabindex="2" />
<label for="ctl00_MainContent_chkBxLstSystemTypes_9">Intuity</label>
</td>
</tr>
<tr>
<td>
<input id="ctl00_MainContent_chkBxLstSystemTypes_10" type="checkbox" name="ctl00$MainContent$chkBxLstSystemTypes$10" tabindex="2" />
<label for="ctl00_MainContent_chkBxLstSystemTypes_10">MMSMailbox</label>
</td>
<td>
<input id="ctl00_MainContent_chkBxLstSystemTypes_11" type="checkbox" name="ctl00$MainContent$chkBxLstSystemTypes$11" tabindex="2" />
<label for="ctl00_MainContent_chkBxLstSystemTypes_11">MMSUser</label>
</td>
<td>
<input id="ctl00_MainContent_chkBxLstSystemTypes_12" type="checkbox" name="ctl00$MainContent$chkBxLstSystemTypes$12" tabindex="2" />
<label for="ctl00_MainContent_chkBxLstSystemTypes_12">NICE Perform</label>
</td>
<td>
<input id="ctl00_MainContent_chkBxLstSystemTypes_13" type="checkbox" name="ctl00$MainContent$chkBxLstSystemTypes$13" tabindex="2" />
<label for="ctl00_MainContent_chkBxLstSystemTypes_13">PBX</label>
</td>
<td>
<input id="ctl00_MainContent_chkBxLstSystemTypes_14" type="checkbox" name="ctl00$MainContent$chkBxLstSystemTypes$14" tabindex="2" />
<label for="ctl00_MainContent_chkBxLstSystemTypes_14">UNITY</label>
</td>
<td>
<input id="ctl00_MainContent_chkBxLstSystemTypes_15" type="checkbox" name="ctl00$MainContent$chkBxLstSystemTypes$15" tabindex="2" />
<label for="ctl00_MainContent_chkBxLstSystemTypes_15">VoIP</label>
</td>
<td>
<input id="ctl00_MainContent_chkBxLstSystemTypes_16" type="checkbox" name="ctl00$MainContent$chkBxLstSystemTypes$16" tabindex="2" />
<label for="ctl00_MainContent_chkBxLstSystemTypes_16">WebEx</label>
</td>
<td></td>
<td></td>
<td></td>
</tr>
</table>

I suggest to use CliendIdMode="static" in your runat="server" elements that you use them in js. You can try this:
$("#ctl00_MainContent_chkBxLstSystemTypes_0").click(function () {
$(this).parents("table").find(":checkbox").prop("checked", $(this).prop("checked"));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="ctl00_MainContent_chkBxLstSystemTypes" class="chkBxList" border="0">
<tr>
<td>
<input id="ctl00_MainContent_chkBxLstSystemTypes_0" type="checkbox" name="ctl00$MainContent$chkBxLstSystemTypes$0" tabindex="2" />
<label for="ctl00_MainContent_chkBxLstSystemTypes_0">Select All</label>
</td>
<td>
<input id="ctl00_MainContent_chkBxLstSystemTypes_1" type="checkbox" name="ctl00$MainContent$chkBxLstSystemTypes$1" tabindex="2" />
<label for="ctl00_MainContent_chkBxLstSystemTypes_1">ASG</label>
</td>
<td>
<input id="ctl00_MainContent_chkBxLstSystemTypes_2" type="checkbox" name="ctl00$MainContent$chkBxLstSystemTypes$2" tabindex="2" />
<label for="ctl00_MainContent_chkBxLstSystemTypes_2">AVP</label>
</td>
<td>
<input id="ctl00_MainContent_chkBxLstSystemTypes_3" type="checkbox" name="ctl00$MainContent$chkBxLstSystemTypes$3" tabindex="2" />
<label for="ctl00_MainContent_chkBxLstSystemTypes_3">CDR</label>
</td>
<td>
<input id="ctl00_MainContent_chkBxLstSystemTypes_4" type="checkbox" name="ctl00$MainContent$chkBxLstSystemTypes$4" tabindex="2" />
<label for="ctl00_MainContent_chkBxLstSystemTypes_4">CMS</label>
</td>
<td>
<input id="ctl00_MainContent_chkBxLstSystemTypes_5" type="checkbox" name="ctl00$MainContent$chkBxLstSystemTypes$5" tabindex="2" />
<label for="ctl00_MainContent_chkBxLstSystemTypes_5">CUCM_Logins</label>
</td>
<td>
<input id="ctl00_MainContent_chkBxLstSystemTypes_6" type="checkbox" name="ctl00$MainContent$chkBxLstSystemTypes$6" tabindex="2" />
<label for="ctl00_MainContent_chkBxLstSystemTypes_6">CUCM_Subscribers</label>
</td>
<td>
<input id="ctl00_MainContent_chkBxLstSystemTypes_7" type="checkbox" name="ctl00$MainContent$chkBxLstSystemTypes$7" tabindex="2" />
<label for="ctl00_MainContent_chkBxLstSystemTypes_7">Cybertech</label>
</td>
<td>
<input id="ctl00_MainContent_chkBxLstSystemTypes_8" type="checkbox" name="ctl00$MainContent$chkBxLstSystemTypes$8" tabindex="2" />
<label for="ctl00_MainContent_chkBxLstSystemTypes_8">eHealth</label>
</td>
<td>
<input id="ctl00_MainContent_chkBxLstSystemTypes_9" type="checkbox" name="ctl00$MainContent$chkBxLstSystemTypes$9" tabindex="2" />
<label for="ctl00_MainContent_chkBxLstSystemTypes_9">Intuity</label>
</td>
</tr>
<tr>
<td>
<input id="ctl00_MainContent_chkBxLstSystemTypes_10" type="checkbox" name="ctl00$MainContent$chkBxLstSystemTypes$10" tabindex="2" />
<label for="ctl00_MainContent_chkBxLstSystemTypes_10">MMSMailbox</label>
</td>
<td>
<input id="ctl00_MainContent_chkBxLstSystemTypes_11" type="checkbox" name="ctl00$MainContent$chkBxLstSystemTypes$11" tabindex="2" />
<label for="ctl00_MainContent_chkBxLstSystemTypes_11">MMSUser</label>
</td>
<td>
<input id="ctl00_MainContent_chkBxLstSystemTypes_12" type="checkbox" name="ctl00$MainContent$chkBxLstSystemTypes$12" tabindex="2" />
<label for="ctl00_MainContent_chkBxLstSystemTypes_12">NICE Perform</label>
</td>
<td>
<input id="ctl00_MainContent_chkBxLstSystemTypes_13" type="checkbox" name="ctl00$MainContent$chkBxLstSystemTypes$13" tabindex="2" />
<label for="ctl00_MainContent_chkBxLstSystemTypes_13">PBX</label>
</td>
<td>
<input id="ctl00_MainContent_chkBxLstSystemTypes_14" type="checkbox" name="ctl00$MainContent$chkBxLstSystemTypes$14" tabindex="2" />
<label for="ctl00_MainContent_chkBxLstSystemTypes_14">UNITY</label>
</td>
<td>
<input id="ctl00_MainContent_chkBxLstSystemTypes_15" type="checkbox" name="ctl00$MainContent$chkBxLstSystemTypes$15" tabindex="2" />
<label for="ctl00_MainContent_chkBxLstSystemTypes_15">VoIP</label>
</td>
<td>
<input id="ctl00_MainContent_chkBxLstSystemTypes_16" type="checkbox" name="ctl00$MainContent$chkBxLstSystemTypes$16" tabindex="2" />
<label for="ctl00_MainContent_chkBxLstSystemTypes_16">WebEx</label>
</td>
<td></td>
<td></td>
<td></td>
</tr>
</table>

Add this jQuery code & you are done.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$('.chkBxList input:checkbox:first').change(function(){
var status = $(this).is(':checked');
$('.chkBxList input:checkbox').prop('checked', status);
});
</script>
Jsfiddle: http://jsfiddle.net/y9dhwx72/

Categories