We Keep Coding

Get individual value from radio button on array use JQuery

now im doing some PHP project combine with JQuery for radio button. Im new for JQuery code. now i making array for radio button. i want to get individual value when i click one of the radio button.
here is the code that i trying. before that. i make a sample on this link https://repl.it/#ferdinandgush/get-value-radio-button. just press RUN button on the top then you able to test it.
html
<table class="tg">
<thead>
<tr>
<th class="tg-qh0q">Item</th>
<th class="tg-qh0q">Price</th>
<th class="tg-qh0q">Deal</th>
</tr>
</thead>
<tbody>
<tr>
<td class="tg-0lax">Book</td>
<td class="tg-0lax">$ 10 <input type="hidden" name="itemprice" value="10"></td>
<td class="tg-0lax">
<input class="radioDeal" type="radio" name="deal[12][0]" value="yes">yes
<input class="radioDeal" type="radio" name="deal[12][0]" value="no" >No
</td>
</tr>
<tr>
<td class="tg-0lax">Pencil</td>
<td class="tg-0lax">$ 5 <input type="hidden" name="itemprice" value="5"></td>
<td class="tg-0lax">
<input class="radioDeal" type="radio" name="deal[12][1]" value="yes">yes
<input class="radioDeal" type="radio" name="deal[12][1]" value="no" >No
</td>
</tr>
<tr>
<td class="tg-0lax">Pen</td>
<td class="tg-0lax">$ 8 <input type="hidden" name="itemprice" value="8"></td>
<td class="tg-0lax">
<input class="radioDeal" type="radio" name="deal[12][3]" value="yes">yes
<input class="radioDeal" type="radio" name="deal[12][3]" value="no" >No
</td>
</tr>
<tr>
<td class="tg-0lax">spidol</td>
<td class="tg-0lax">$ 15 <input type="hidden" name="itemprice" value="15"></td>
<td class="tg-0lax">
<input class="radioDeal" type="radio" name="deal[12][4]" value="yes">yes
<input class="radioDeal" type="radio" name="deal[12][4]" value="no" >No
</td>
</tr>
</tbody>
</table>
JS
$(function() {
$('.radioDeal').on('input', function(){
console.log($(this).attr("name"));
var name = $(this).attr("name");
console.log($('input[name="+ name +"]:checked').val());
});
});
so what im focusing is, i able to get individual attribute name when i click on of the radio button. from that attribute name, i want to get the value. but not work.
do i able to do that?.
please help

You almost have it, you can get the value like this:
var checkedvalue = $('input[name="'+ name +'"]:checked').val();
Working example:
$(function() {
$('.radioDeal').on('input', function(){
var name = $(this).attr("name");
var checkedvalue = $('input[name="'+ name +'"]:checked').val();
console.log(name+' = '+checkedvalue);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="tg">
<thead>
<tr>
<th class="tg-qh0q">Item</th>
<th class="tg-qh0q">Price</th>
<th class="tg-qh0q">Deal</th>
</tr>
</thead>
<tbody>
<tr>
<td class="tg-0lax">Book</td>
<td class="tg-0lax">$ 10 <input type="hidden" name="itemprice" value="10"></td>
<td class="tg-0lax">
<input class="radioDeal" type="radio" name="deal[12][0]" value="yes">yes
<input class="radioDeal" type="radio" name="deal[12][0]" value="no" >No
</td>
</tr>
<tr>
<td class="tg-0lax">Pencil</td>
<td class="tg-0lax">$ 5 <input type="hidden" name="itemprice" value="5"></td>
<td class="tg-0lax">
<input class="radioDeal" type="radio" name="deal[12][1]" value="yes">yes
<input class="radioDeal" type="radio" name="deal[12][1]" value="no" >No
</td>
</tr>
<tr>
<td class="tg-0lax">Pen</td>
<td class="tg-0lax">$ 8 <input type="hidden" name="itemprice" value="8"></td>
<td class="tg-0lax">
<input class="radioDeal" type="radio" name="deal[12][3]" value="yes">yes
<input class="radioDeal" type="radio" name="deal[12][3]" value="no" >No
</td>
</tr>
<tr>
<td class="tg-0lax">spidol</td>
<td class="tg-0lax">$ 15 <input type="hidden" name="itemprice" value="15"></td>
<td class="tg-0lax">
<input class="radioDeal" type="radio" name="deal[12][4]" value="yes">yes
<input class="radioDeal" type="radio" name="deal[12][4]" value="no" >No
</td>
</tr>
</tbody>
</table>

Since the change event triggers when state changes from not checked to checked it is therefore the ideal event to use as the this refers to the radio just checked:
$('.radioDeal').on('change', function() {
console.log( `${this.name} = ${this.value}` );
});
DEMO
$(function() {
$('.radioDeal').on('change', function() {
console.log( `${this.name} = ${this.value}` );
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="tg">
<thead>
<tr>
<th class="tg-qh0q">Item</th>
<th class="tg-qh0q">Price</th>
<th class="tg-qh0q">Deal</th>
</tr>
</thead>
<tbody>
<tr>
<td class="tg-0lax">Book</td>
<td class="tg-0lax">$ 10 <input type="hidden" name="itemprice" value="10"></td>
<td class="tg-0lax">
<input class="radioDeal" type="radio" name="deal[12][0]" value="yes">yes
<input class="radioDeal" type="radio" name="deal[12][0]" value="no" >No
</td>
</tr>
<tr>
<td class="tg-0lax">Pencil</td>
<td class="tg-0lax">$ 5 <input type="hidden" name="itemprice" value="5"></td>
<td class="tg-0lax">
<input class="radioDeal" type="radio" name="deal[12][1]" value="yes">yes
<input class="radioDeal" type="radio" name="deal[12][1]" value="no" >No
</td>
</tr>
<tr>
<td class="tg-0lax">Pen</td>
<td class="tg-0lax">$ 8 <input type="hidden" name="itemprice" value="8"></td>
<td class="tg-0lax">
<input class="radioDeal" type="radio" name="deal[12][3]" value="yes">yes
<input class="radioDeal" type="radio" name="deal[12][3]" value="no" >No
</td>
</tr>
<tr>
<td class="tg-0lax">spidol</td>
<td class="tg-0lax">$ 15 <input type="hidden" name="itemprice" value="15"></td>
<td class="tg-0lax">
<input class="radioDeal" type="radio" name="deal[12][4]" value="yes">yes
<input class="radioDeal" type="radio" name="deal[12][4]" value="no" >No
</td>
</tr>
</tbody>
</table>

document.querySelectorAll select id of specific input

I have a table which has two separate checkbox inputs. When selecting the first input there is a cumulative amount which calculates. If you select the second checkbox, the function errors (because of the duplicate input).
Function
function updateTotals() {
var sum = Array.prototype.reduce.call(document.querySelectorAll("input.check:checked"),(a,v) => a + parseFloat(v.dataset.totalAmount), 0);
$('#checkedTotal').val(sum);
};
What I need to do is separate the inputs, maybe using a class. I cant seem to get the syntax, or may be barking up the wrong tree. Something like...
function updateTotals() {
var sum = Array.prototype.reduce.call(document.querySelectorAll ('.input').check:checked,(a,v) => a + parseFloat(v.dataset.totalAmount), 0);
$('#checkedTotal').val(sum);
};
I would add this as an jsfiddle example, but the table is in a Salesforce Visualforce Page, using apex fields.
Thanks in advance
UPDATE
Added HTML
<div style="width:50%;">
<form id="j_id0:j_id2" name="j_id0:j_id2" method="post">
<input type="hidden" name="j_id0:j_id2" value="j_id0:j_id2">
<input disabled="disabled" id="checkedTotal" name="amount" placeholder="Selected Amount" step=".02" type="number">
<table id="invoicesTable" style="width:100%;">
<thead class="tableHeadBlue">
<tr>
<td>Select</td>
<td>Date</td>
<td>Type</td>
<td>Order</td>
<td>Amount</td>
<td>id</td>
<td>Select2</td>
</tr>
</thead>
<tbody>
<tr>
<td>
<label class="formCheck"><input id="j_id0:j_id2:j_id4:0:inputId" type="checkbox" name="j_id0:j_id2:j_id4:0:inputId" class="check" onchange="updateTotals();" style="font-size:26px;" data-total-amount="458.00">
</label>
</td>
<td><span id="j_id0:j_id2:j_id4:0:j_id7">19/04/2018</span>
<span style="color:red;">
</span>
</td>
<td>Invoice
</td>
<td>
<span style="color:Black"><span id="j_id0:j_id2:j_id4:0:j_id14">00006648</span>
</span>
</td>
<td><span id="j_id0:j_id2:j_id4:0:j_id16">$458.00</span></td>
<td><span id="j_id0:j_id2:j_id4:0:j_id18">8015D000000CsiH</span></td>
<td><input type="checkbox" name="j_id0:j_id2:j_id4:0:j_id20" class="check" style="font-size:26px;"></td>
</tr>
<tr>
<td>
<label class="formCheck"><input id="j_id0:j_id2:j_id4:1:inputId" type="checkbox" name="j_id0:j_id2:j_id4:1:inputId" class="check" onchange="updateTotals();" style="font-size:26px;" data-total-amount="200.00">
</label>
</td>
<td><span id="j_id0:j_id2:j_id4:1:j_id7">21/06/2018</span>
<span style="color:red;">
</span>
</td>
<td>Invoice
</td>
<td>
<span style="color:Black"><span id="j_id0:j_id2:j_id4:1:j_id14">00006849</span>
</span>
</td>
<td><span id="j_id0:j_id2:j_id4:1:j_id16">$200.00</span></td>
<td><span id="j_id0:j_id2:j_id4:1:j_id18">8015D000000DEuB</span></td>
<td><input type="checkbox" name="j_id0:j_id2:j_id4:1:j_id20" class="check" style="font-size:26px;"></td>
</tr>
<tr>
<td>
<label class="formCheck"><input id="j_id0:j_id2:j_id4:2:inputId" type="checkbox" name="j_id0:j_id2:j_id4:2:inputId" class="check" onchange="updateTotals();" style="font-size:26px;" data-total-amount="500.00">
</label>
</td>
<td>
<span style="color:red;"><span id="j_id0:j_id2:j_id4:2:j_id9">22/06/2018</span>
</span>
</td>
<td><span style="color:red;">Credit</span>
</td>
<td>
<span style="color:red"><span id="j_id0:j_id2:j_id4:2:j_id14">00006852</span>
</span>
</td>
<td><span id="j_id0:j_id2:j_id4:2:j_id16">$500.00</span></td>
<td><span id="j_id0:j_id2:j_id4:2:j_id18">8015D000000DHKW</span></td>
<td><input type="checkbox" name="j_id0:j_id2:j_id4:2:j_id20" class="check" style="font-size:26px;"></td>
</tr>
</tbody>
</table><div id="j_id0:j_id2:j_id24"></div>
</form>
</div>

Add class first to first checkbox in <tr> and add class second to second checkbox in <tr>.
updateTotals only query checkbox which has class first to avoid second.
function updateTotals() {
var sum = Array.prototype.reduce.call(document.querySelectorAll("input.check.first:checked"),(a,v) => a + parseFloat(v.dataset.totalAmount), 0);
$('#checkedTotal').val(sum);
};
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="width:50%;">
<form id="j_id0:j_id2" name="j_id0:j_id2" method="post">
<input type="hidden" name="j_id0:j_id2" value="j_id0:j_id2">
<input disabled="disabled" id="checkedTotal" name="amount" placeholder="Selected Amount" step=".02" type="number">
<table id="invoicesTable" style="width:100%;">
<thead class="tableHeadBlue">
<tr>
<td>Select</td>
<td>Date</td>
<td>Type</td>
<td>Order</td>
<td>Amount</td>
<td>id</td>
<td>Select2</td>
</tr>
</thead>
<tbody>
<tr>
<td>
<label class="formCheck"><input id="j_id0:j_id2:j_id4:0:inputId" type="checkbox" name="j_id0:j_id2:j_id4:0:inputId" class="check first" onchange="updateTotals();" style="font-size:26px;" data-total-amount="458.00">
</label>
</td>
<td><span id="j_id0:j_id2:j_id4:0:j_id7">19/04/2018</span>
<span style="color:red;">
</span>
</td>
<td>Invoice
</td>
<td>
<span style="color:Black"><span id="j_id0:j_id2:j_id4:0:j_id14">00006648</span>
</span>
</td>
<td><span id="j_id0:j_id2:j_id4:0:j_id16">$458.00</span></td>
<td><span id="j_id0:j_id2:j_id4:0:j_id18">8015D000000CsiH</span></td>
<td><input type="checkbox" name="j_id0:j_id2:j_id4:0:j_id20" class="check second" style="font-size:26px;"></td>
</tr>
<tr>
<td>
<label class="formCheck"><input id="j_id0:j_id2:j_id4:1:inputId" type="checkbox" name="j_id0:j_id2:j_id4:1:inputId" class="check first" onchange="updateTotals();" style="font-size:26px;" data-total-amount="200.00">
</label>
</td>
<td><span id="j_id0:j_id2:j_id4:1:j_id7">21/06/2018</span>
<span style="color:red;">
</span>
</td>
<td>Invoice
</td>
<td>
<span style="color:Black"><span id="j_id0:j_id2:j_id4:1:j_id14">00006849</span>
</span>
</td>
<td><span id="j_id0:j_id2:j_id4:1:j_id16">$200.00</span></td>
<td><span id="j_id0:j_id2:j_id4:1:j_id18">8015D000000DEuB</span></td>
<td><input type="checkbox" name="j_id0:j_id2:j_id4:1:j_id20" class="check second" style="font-size:26px;"></td>
</tr>
<tr>
<td>
<label class="formCheck"><input id="j_id0:j_id2:j_id4:2:inputId" type="checkbox" name="j_id0:j_id2:j_id4:2:inputId" class="check first" onchange="updateTotals();" style="font-size:26px;" data-total-amount="500.00">
</label>
</td>
<td>
<span style="color:red;"><span id="j_id0:j_id2:j_id4:2:j_id9">22/06/2018</span>
</span>
</td>
<td><span style="color:red;">Credit</span>
</td>
<td>
<span style="color:red"><span id="j_id0:j_id2:j_id4:2:j_id14">00006852</span>
</span>
</td>
<td><span id="j_id0:j_id2:j_id4:2:j_id16">$500.00</span></td>
<td><span id="j_id0:j_id2:j_id4:2:j_id18">8015D000000DHKW</span></td>
<td><input type="checkbox" name="j_id0:j_id2:j_id4:2:j_id20" class="check second" style="font-size:26px;"></td>
</tr>
</tbody>
</table><div id="j_id0:j_id2:j_id24"></div>
</form>
</div>

Conditional Highlighting with Jquery

In this example https://jsfiddle.net/erv79u0w/, when "Select All" is clicked, all the respective values are highlighted on the table.
Is it possible to highlight ONLY the values existing together in the same row on the table. As an example, the first values (A,B,X,Y) when Selected with "Select All", only the values that appear in the same row together should be highlighted. And in this case, it is only the second row on the table. So only the values on the second row should be highlighted.
The cells not in the same row shouldn't be highlighted like in the image below.
$('.selector').each(function() {
$(this).on('click', check);
});
$('.all').each(function() {
$(this).on('click', all);
});
function all(event) {
if ($(this).is(':checked')) {
$("input:checkbox:not(:checked)", $(this).parents('form')).not(this).prop("checked", "checked");
} else {
$("input:checkbox(:checked)", $(this).parents('form')).not(this).prop("checked", "");
}
//$('.selector').prop("checked", this.name === "SelectAll");
check(event);
}
function check(event) {
var checked = $(".selector:checked").map(function() {
return this.name
}).get()
$('td').removeClass("highlight").filter(function() {
return $.inArray($(this).text(), checked) >= 0
}).addClass("highlight")
if ($(this).is(".selector"))
$('.all').not(this).prop("checked", false)
}
.highlight {
background: #9ac99d;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div id="container">
<div id="sidebar1">
<div id="container">
<div id="sidebar1">
<h3>Parameters:</h3>
<form id="form1" name="form1" method="post" action="">
<label>
<input type="checkbox" name="SelectAll" class="all" />Select All</label>
<label>
<input type="checkbox" name="A" class="selector" />A</label>
<label>
<input type="checkbox" name="B" class="selector" />B</label>
<label>
<input type="checkbox" name="X" class="selector" />X</label>
<label>
<input type="checkbox" name="Y" class="selector" />Y</label>
</form>
<form id="form2" name="form2" method="post" action="">
<label>
<input type="checkbox" name="SelectAll" class="all" />Select All</label>
<label>
<input type="checkbox" name="K" class="selector" />K</label>
<label>
<input type="checkbox" name="J" class="selector" />J</label>
<label>
<input type="checkbox" name="M" class="selector" />M</label>
<label>
<input type="checkbox" name="T" class="selector" />T</label>
</form>
</div>
<div id="mainContent">
<h3 align="right"> </h3>
<div>
<table width="200" border="1">
<tr>
<td>A</td>
<td> </td>
<td>M</td>
<td> </td>
<td>K</td>
<td>J</td>
</tr>
<tr>
<td> </td>
<td>B</td>
<td>A</td>
<td> </td>
<td>Y</td>
<td>X</td>
</tr>
<tr>
<td> </td>
<td>Y</td>
<td> </td>
<td>J</td>
<td>T</td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> X</td>
<td> </td>
<td>X</td>
<td> </td>
<td>Y</td>
</tr>
<tr>
<td>K</td>
<td>Q</td>
<td> </td>
<td>T</td>
<td> </td>
<td>Y</td>
</tr>
<tr>
<td>M</td>
<td> </td>
<td>T</td>
<td>K</td>
<td>J</td>
<td>Z</td>
</tr>
</table>
</div>
</div>

Array.prototype.compare = function(testArr) {
if (this.length != testArr.length) return false;
for (var i = 0; i < testArr.length; i++) {
if (this[i].compare) { //To test values in nested arrays
if (!this[i].compare(testArr[i])) return false;
} else if (this[i] !== testArr[i]) return false;
}
return true;
}
$(document).on('click', '.all', function() {
$('#mainContent table tr td').removeClass('highlight');
if (!$(this).is(':checked')) {
$(this).closest('form').find('input.selector').prop('checked', false);
}
$('input[name=SelectAll]').each(function() {
if ($(this).is(':checked')) {
$(this).closest('form').find('input.selector').prop('checked', true);
processAllClick($(this));
} else {
processIndividualClick($(this));
}
});
});
$(document).on('click', '.selector', function() {
$('#mainContent table tr td').removeClass('highlight');
if (!$(this).is(':checked')) {
$(this).closest('form').find('input.all').prop('checked', false);
}
$('input[name=SelectAll]').each(function() {
if ($(this).is(':checked')) {
processAllClick($(this));
} else {
processIndividualClick($(this));
}
});
});
function processIndividualClick(input) {
$(input).closest('form').find('input.selector:checked').each(function() {
$('td:contains(' + $(this).attr('name') + ')').addClass('highlight');
});
}
function processAllClick(input) {
var elems = [];
$(input).closest('form').find('input.selector:checked').each(function() {
elems.push($(this).attr('name'));
});
$('#mainContent table tr').each(function() {
var child = [];
$(this).find('td').each(function() {
if ($.inArray($(this).text(), elems) != -1)
child.push($(this).text());
});
if (elems.sort().compare(child.sort())) {
for (var i = 0; i < child.length; i++) {
$(this).find('td').each(function() {
if ($(this).text() == child[i]) {
$(this).addClass('highlight');
}
});
}
}
});
}
.highlight {
background: #9ac99d;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
<div id="sidebar1">
<div id="container">
<div id="sidebar1">
<h3>Parameters:</h3>
<form id="form1" name="form1" method="post" action="">
<label>
<input type="checkbox" name="SelectAll" class="all" />Select All</label>
<label>
<input type="checkbox" name="A" class="selector" />A</label>
<label>
<input type="checkbox" name="B" class="selector" />B</label>
<label>
<input type="checkbox" name="X" class="selector" />X</label>
<label>
<input type="checkbox" name="Y" class="selector" />Y</label>
</form>
<form id="form2" name="form2" method="post" action="">
<label>
<input type="checkbox" name="SelectAll" class="all" />Select All</label>
<label>
<input type="checkbox" name="K" class="selector" />K</label>
<label>
<input type="checkbox" name="J" class="selector" />J</label>
<label>
<input type="checkbox" name="M" class="selector" />M</label>
<label>
<input type="checkbox" name="T" class="selector" />T</label>
</form>
</div>
<div id="mainContent">
<h3 align="right"> </h3>
<div>
<table width="200" border="1">
<tr>
<td>A</td>
<td> </td>
<td>M</td>
<td> </td>
<td>K</td>
<td>J</td>
</tr>
<tr>
<td> </td>
<td>B</td>
<td>A</td>
<td> </td>
<td>Y</td>
<td>X</td>
</tr>
<tr>
<td> </td>
<td>Y</td>
<td> </td>
<td>J</td>
<td>T</td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> X</td>
<td> </td>
<td>X</td>
<td> </td>
<td>Y</td>
</tr>
<tr>
<td>K</td>
<td>Q</td>
<td> </td>
<td>T</td>
<td> </td>
<td>Y</td>
</tr>
<tr>
<td>M</td>
<td> </td>
<td>T</td>
<td>K</td>
<td>J</td>
<td>Z</td>
</tr>
</table>
</div>
</div>
All click event is handled here

Restrict check/uncheck all to current page

I have a select all checkbox that controls the checkboxes in table that is paginated in to subsequent pages. This works well except that it selects all records. For example, if a table has 200 records with a per page view of 20, I expect 10 pages in total. However, when the select all is checked, then it selects all 200 records and not just 20 of the current page. The expected result should be 20. I have researched broadly but not found an answer yet.
Here is a recreated problem
html
<table id='Table'>
<thead>
<tr>
<th>
<input type="checkbox" name="ticAll" id="ticAll"> </th>
<th>name</th>
<th>Age</th>
</tr>
</thead>
<tbody id='pagCont'>
<tr>
<td>
<input type="checkbox" name="records[]" id="records" value="1">
</td>
<td>Tom</td>
<td>22</td>
</tr>
<tr>
<td>
<input type="checkbox" name="records[]" id="records" value="2">
</td>
<td>Harry</td>
<td>24</td>
</tr>
<tr>
<td>
<input type="checkbox" name="records[]" id="records" value="3">
</td>
<td>Diva</td>
<td>23</td>
</tr>
<tr>
<td>
<input type="checkbox" name="records[]" id="records" value="4">
</td>
<td>Charlotte</td>
<td>23</td>
</tr>
<tr>
<td>
<input type="checkbox" name="records[]" id="records" value="5">
</td>
<td>Danny</td>
<td>23</td>
</tr>
<tr>
<td>
<input type="checkbox" name="records[]" id="records" value="6">
</td>
<td>Romeo</td>
<td>23</td>
</tr>
<tr>
<td>
<input type="checkbox" name="records[]" id="records" value="7">
</td>
<td>Gladys</td>
<td>21</td>
</tr>
<tr>
<td>
<input type="checkbox" name="records[]" id="records" value="8">
</td>
<td>Troy</td>
<td>23</td>
</tr>
<tr>
<td>
<input type="checkbox" name="records[]" id="records" value="9">
</td>
<td>John</td>
<td>23</td>
</tr>
<tr>
<td>
<input type="checkbox" name="records[]" id="records" value="1">
</td>
<td>Fabio</td>
<td>23</td>
</tr>
<tr>
<td>
<input type="checkbox" name="records[]" id="records" value="10">
</td>
<td>Gracia</td>
<td>23</td>
</tr>
<tr>
<td>
<input type="checkbox" name="records[]" id="records" value="11">
</td>
<td>Tamuda</td>
<td>23</td>
</tr>
<tr>
<td>
<input type="checkbox" name="records[]" id="records" value="12">
</td>
<td>Elliot</td>
<td>23</td>
</tr>
<tr>
<td>
<input type="checkbox" name="records[]" id="records" value="13">
</td>
<td>John</td>
<td>23</td>
</tr>
<tr>
<td>
<input type="checkbox" name="records[]" id="records" value="14">
</td>
<td>Mohammad</td>
<td>23</td>
</tr>
<tr>
<td>
<input type="checkbox" name="records[]" id="records" value="15">
</td>
<td>Ellias</td>
<td>23</td>
</tr>
<tr>
<td>
<input type="checkbox" name="records[]" id="records" value="16">
</td>
<td>Charlie</td>
<td>23</td>
</tr>
<tr>
<td>
<input type="checkbox" name="records[]" id="records" value="17">
</td>
<td>Steve</td>
<td>23</td>
</tr>
<tr>
<td>
<input type="checkbox" name="records[]" id="records" value="18">
</td>
<td>Froom</td>
<td>23</td>
</tr>
<tr>
<td>
<input type="checkbox" name="records[]" id="records" value="19">
</td>
<td>Josh</td>
<td>23</td>
</tr>
<tr>
<td>
<input type="checkbox" name="records[]" id="records" value="1">
</td>
<td>Meerkat</td>
<td>23</td>
</tr>
<tr>
<td>
<input type="checkbox" name="records[]" id="records" value="20">
</td>
<td>Toledo</td>
<td>23</td>
</tr>
<tr>
<td>
<input type="checkbox" name="records[]" id="records" value="21">
</td>
<td>Clay</td>
<td>23</td>
</tr>
</tbody>
</table>
<div id="page-nav"></div>
JavaScript
$("#ticAll").click(function () {
$('input:checkbox').not(this).prop('checked', this.checked);
});
jQuery(function($) {
var items = $("#Table tr");
console.log(items);
var numItems ='21';
var perPage ='10' ;
// only show the first 2 (or "first per_page") items initially
items.slice(perPage).hide();
// now setup pagination
$("#page-nav").pagination({
items: numItems,
itemsOnPage:perPage,
cssStyle: "dark-theme",
onPageClick: function(pageNumber) {
var showFrom = perPage * (pageNumber - 1);
var showTo = showFrom + perPage;
items.hide()
.slice(showFrom, showTo).show();
}
});
var checkFragment = function() {
// if there's no hash, make sure we go to page 1
var hash = window.location.hash || "#page-1";
hash = hash.match(/^#page-(\d+)$/);
if(hash)
$("#page-nav").pagination("selectPage", parseInt(hash[1]));
};
$(window).bind("popstate", checkFragment);
// and we'll also call it to check right now!
checkFragment();
});

Just replace you ticAll function with following code.
$("#ticAll").click(function () {
$('input:checkbox:visible').not(this).prop('checked', this.checked);
});
When you check All it will select only first page of check-boxes.

Disable all other checkboxes in tabular row

I want all other checkboxes if one is selected. As far as I can see the code should be working (there are no console errors). What am I doing wrong?
As an added complexity this same event listener may tick other checkboxes; ideally the rows containing any of these checkboxes that become checked should also be disabled.
(".chkbox").on('change', function() {
var locked = false;
// var for current row
var row = $(this).closest('tr').index();
var $checkboxes = $('#key_table > tbody > tr > td:nth-child(' + (row + 1) + ')').find('[type=checkbox]');
$(this).on('click', function toggleLock(e) {
e.preventDefault();
// Make locked true if it was false, or vice-versa
locked = !locked;
// And apply that value to the 'disabled' attribute of the checkboxes
$checkboxes.attr('disabled', locked);
});
});
<table border="1">
<caption>
<h5>Selection</h5>
</caption>
<tr id="9">
<td>9.00</td>
<td>
<input type="checkbox" class="chkbox" title="9" value="9" />orders</td>
<td>
<input type="checkbox" class="chkbox" title="113" value="113" />placements</td>
<td> </td>
<td> </td>
<td>
<input type="checkbox" class="chkbox" title="128" value="128" />merchandise</td>
</td>
</tr>
<tr id="10">
<td>10.00</td>
<td>
<input type="checkbox" class="chkbox" title="9" value="9" />transport</td>
<td>
<input type="checkbox" class="chkbox" title="113" value="113" />shipping</td>
<td>
<input type="checkbox" class="chkbox" title="128" value="128" />merchandise</td>
</td>
<td> </td>
<td> </td>
</tr>
<tr id="11">
<td>11.00</td>
<td>
<input type="checkbox" class="chkbox" title="128" value="128" />merchandise</td>
<td>
<input type="checkbox" class="chkbox" title="113" value="113" />shipping</td>
</td>
<td> </td>
<td> </td>
<td> </td>
</tr>

In this demo you can also uncheck and that action will enable each checkboxes in a row
working demo: http://jsfiddle.net/darxide/vpvaseL0/
$('body').on('change' , 'tr input' , function () {
var count_checked = 0;
$(this).parent().parent().find('input:checked').each(function() {
count_checked++
})
if(count_checked > 0){
$(this).parent().parent().find('input').each(function () {
$(this).prop('disabled' , true)
})
$(this).removeAttr('disabled')
} else {
$(this).parent().parent().find("input").removeAttr('disabled')
}
})

This should work:
$(".chkbox").click(function(){
var currentObj = $(this);
$(this)
.closest("tr")
.find(".chkbox").attr("disabled","disabled");
$(currentObj).removeAttr("disabled");
});
fiddle

You can use .closest().siblings().find().prop() method in this case. Another suggestion is to use group radios:
$(".chkbox").on('change', function() {
$(this).closest("td").siblings("td").find(":checkbox").prop("disabled", this.checked);
});
Here this.checked returns boolean value. If checked true and unchecked then false.
The issue seems to me that the way you have written your code that tells to bind the click event on currently clicked check box.
$(".chkbox").on('change', function() {
$(this).closest("td").siblings("td").find(":checkbox").prop("disabled", this.checked);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table border="1">
<caption>
<h5>Selection</h5>
</caption>
<tr id="9">
<td>9.00</td>
<td>
<input type="checkbox" class="chkbox" title="9" value="9" />orders</td>
<td>
<input type="checkbox" class="chkbox" title="113" value="113" />placements</td>
<td> </td>
<td> </td>
<td>
<input type="checkbox" class="chkbox" title="128" value="128" />merchandise</td>
</td>
</tr>
<tr id="10">
<td>10.00</td>
<td>
<input type="checkbox" class="chkbox" title="9" value="9" />transport</td>
<td>
<input type="checkbox" class="chkbox" title="113" value="113" />shipping</td>
<td>
<input type="checkbox" class="chkbox" title="128" value="128" />merchandise</td>
</td>
<td> </td>
<td> </td>
</tr>
<tr id="11">
<td>11.00</td>
<td>
<input type="checkbox" class="chkbox" title="128" value="128" />merchandise</td>
<td>
<input type="checkbox" class="chkbox" title="113" value="113" />shipping</td>
</td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>