Develop Reference

How can I get the value of the last th?

I need to print the word of Emails on click of all checkboxes. How can I do that? Here is my HTML structure:
$('td input').on('change', function() {
var header_name = $(this).closests('tr').sibilings('th').last().text();
console.log(header_name);
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tbody>
<tr>
<th><input type="checkbox" class="all_checkboxes"></th>
<th>Emails</th>
</tr>
<tr>
<td><input type="checkbox" data-id="email"></td>
<td>email</td>
</tr>
<tr>
<td><input type="checkbox" data-id="gmail"></td>
<td>gmail</td>
</tr>
<tr>
<td><input type="checkbox" data-id="aol"></td>
<td>aol</td>
</tr>
<tr>
<td><input type="checkbox" data-id="chmail"></td>
<td>chmail</td>
</tr>
</tbody>
</table>

Firstly you have a couple of typos. closests() should be closest() and sibilings() needs to be siblings().
The issue itself is because your DOM traversal is not correct. You're trying to look at sibling th of the parent tr to the clicked input, when the th you're aiming for is in a completely different row.
To fix this you should use closest() to get the table, then find() the tr:last, like this:
$('td input').on('change', function() {
var header_name = $(this).closest('table').find('th:last').text();
console.log(header_name);
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tbody>
<tr>
<th><input type="checkbox" class="all_checkboxes"></th>
<th>Emails</th>
</tr>
<tr>
<td><input type="checkbox" data-id="email"></td>
<td>email</td>
</tr>
<tr>
<td><input type="checkbox" data-id="gmail"></td>
<td>gmail</td>
</tr>
<tr>
<td><input type="checkbox" data-id="aol"></td>
<td>aol</td>
</tr>
<tr>
<td><input type="checkbox" data-id="chmail"></td>
<td>chmail</td>
</tr>
</tbody>
</table>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tbody>
<tr>
<th><input type="checkbox" class="all_checkboxes"></th>
<th>Emails</th>
</tr>
<tr>
<td><input type="checkbox" data-id="email"></td>
<td>email</td>
</tr>
<tr>
<td><input type="checkbox" data-id="gmail"></td>
<td>gmail</td>
</tr>
<tr>
<td><input type="checkbox" data-id="aol"></td>
<td>aol</td>
</tr>
<tr>
<td><input type="checkbox" data-id="chmail"></td>
<td>chmail</td>
</tr>
</tbody>
</table>
<script>
$('td input, th input').on('change', function(){
var header_name = $( "tr:first" ).last().text();
console.log(header_name);
})
</script>

Select all checkboxes in a specific scope?

Here is my code:
$(".all_checkboxes").click(function () {
$('input:checkbox').not(this).prop('checked', this.checked);
});
td, th{
border: 1px solid gray;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h2>Section 1:</h2>
<table>
<tr>
<th><input type="checkbox" class="all_checkboxes" /></th>
<th>Names</th>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>twitter</td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>instagram</td>
</tr>
</table>
<h2>Section 2:</h2>
<table>
<tr>
<th><input type="checkbox" class="all_checkboxes" /></th>
<th>Ids</th>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>454756</td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>547498</td>
</tr>
</table>
My question is almost clear in the fiddle above. As you can see, currently all checkboxes will be selected in both sections. All I need to do is define a scope for jQuery selector. How can I do that?

$('input:checkbox') will search for all the checkboxes. You will have to navigate to closest table and search checkboxes in it.
$(".all_checkboxes").click(function () {
$(this)
.closest('table')
.find('input:checkbox')
.not(this)
.prop('checked', this.checked);
});
td, th{
border: 1px solid gray;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h2>Section 1:</h2>
<table>
<tr>
<th><input type="checkbox" class="all_checkboxes" /></th>
<th>Names</th>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>twitter</td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>instagram</td>
</tr>
</table>
<h2>Section 2:</h2>
<table>
<tr>
<th><input type="checkbox" class="all_checkboxes" /></th>
<th>Ids</th>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>454756</td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>547498</td>
</tr>
</table>

If you want with in table. Use closest() to get the checkbox with in table
Use change event instead of click.
$(".all_checkboxes").change(function () {
$(this).closest('table').find(':checkbox').not(this).prop('checked', this.checked);
});
td, th{
border: 1px solid gray;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h2>Section 1:</h2>
<table>
<tr>
<th><input type="checkbox" class="all_checkboxes" /></th>
<th>Names</th>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>twitter</td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>instagram</td>
</tr>
</table>
<h2>Section 2:</h2>
<table>
<tr>
<th><input type="checkbox" class="all_checkboxes" /></th>
<th>Ids</th>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>454756</td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>547498</td>
</tr>
</table>

Looks like this is going to be a repeated action so you should consider having a faster solution than the ones available with jQuery.
Also your markup is not very well prepared for these kinds of actions. If updating the markup is an option. You can go as follows:
<h2>Section 1:</h2>
<table>
<tr>
<th><input type="checkbox" data-checkall="names" class="all_checkboxes" /></th>
<th>Names</th>
</tr>
<tr>
<td><input type="checkbox" data-rel="names" /></td>
<td>twitter</td>
</tr>
<tr>
<td><input type="checkbox" data-rel="names" /></td>
<td>instagram</td>
</tr>
</table>
<h2>Section 2:</h2>
<table>
<tr>
<th><input type="checkbox" data-checkall="section" class="all_checkboxes" /></th>
<th>Ids</th>
</tr>
<tr>
<td><input type="checkbox" data-rel="section" /></td>
<td>454756</td>
</tr>
<tr>
<td><input type="checkbox" data-rel="section" /></td>
<td>547498</td>
</tr>
</table>
Native JS version (fastest performance):
function checkAllHandler(e){
var state = this.checked;
Array.prototype.forEach.call(
document.querySelectorAll("[data-rel=" + this.dataset.checkall+"]"),
function(x){
x.checked = state;
}
)
}
Array.prototype.forEach.call(document.querySelectorAll(".all_checkboxes"), function(x){
x.addEventListener("click", checkAllHandler);
})
Codepen: https://codepen.io/Mchaov/pen/vexprr?editors=1010

Select all checkboxes under tbody not working

I'm not sure why this jquery is not working. What I want is pretty straightforward: selecting all check boxes under the region. Could someone help tell why it's not working?
$(function(){
$('.select_all').change(function() {
var checkthis = $(this);
var checkboxes = $(this).next('tbody').find('.region_ct');
if(checkthis.is(':checked')) {
checkboxes.attr('checked', true);
} else {
checkboxes.attr('checked', false); }
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table">
<tr>
<th colspan=2>Americas</th>
</tr>
<tr>
<td colspan=2><input type="checkbox" name="region_am_all" class="select_all" value="X" /> Select All</td>
</tr>
<tbody>
<tr>
<td><input type="checkbox" class="region_ct" value="X" /> Argentina</td>
<td class="center"></td>
</tr>
<tr>
<td><input type="checkbox" class="region_ct" value="X" /> Barbados</td>
<td class="center"></td>
</tr>
</tbody>
<tr>
<th colspan=2>Asia</th>
</tr>
...
</table>

There are a couple of issues there:
I would strongly recommend against intermixing tr and tbody elements. If you're going to use tbody (and you should), use it consistently. Browsers may relocate tr elements into generated tbody elements.
The element you're calling next on doesn't have a following sibling (at all, much less the one you're looking for). You have to traverse up the hierarchy to the tr (if you don't fix #1) or the tbody (if you do).
You don't use attr to set checked, you use prop; and you can use your existing checked boolean rather than if/else, giving is simply checkboxes.prop("checked", this.checked);
Example with updated tbodys, and I've added some countries in the Asia area to demonstrate that only the relevant checkboxes are checked:
$(function() {
$('.select_all').change(function() {
var checkthis = $(this);
var checkboxes = $(this).closest('tbody').next().find('.region_ct');
checkboxes.prop("checked", this.checked);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table">
<tbody>
<tr>
<th colspan=2>Americas</th>
</tr>
<tr>
<td colspan=2>
<input type="checkbox" name="region_am_all" class="select_all" value="X" />Select All</td>
</tr>
</tbody>
<tbody>
<tr>
<td>
<input type="checkbox" class="region_ct" value="X" />Argentina</td>
<td class="center"></td>
</tr>
<tr>
<td>
<input type="checkbox" class="region_ct" value="X" />Barbados</td>
<td class="center"></td>
</tr>
</tbody>
<tbody>
<tr>
<th colspan=2>Asia</th>
</tr>
<tr>
<td colspan=2>
<input type="checkbox" name="region_am_all" class="select_all" value="X" />Select All</td>
</tr>
</tbody>
<tbody>
<tr>
<td>
<input type="checkbox" class="region_ct" value="X" />China</td>
<td class="center"></td>
</tr>
<tr>
<td>
<input type="checkbox" class="region_ct" value="X" />Vietnam</td>
<td class="center"></td>
</tr>
</tbody>
</table>
You might also consider putting the select_all inside the same tbody with the checkboxes, so you could do away with next.

tbody isn't sibing of .select_all. You need to use .closest() to select parent of .select_all and use .find() to select .region_ct in it. Also you don't need to use if/else to check/uncheck checkbox. Only set this.checked to checked attribute of checkbox using .prop().
$('.select_all').change(function() {
$(this).closest('table').find('.region_ct').prop('checked', this.checked);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table">
<tr>
<th colspan=2>Americas</th>
</tr>
<tr>
<td colspan=2><input type="checkbox" name="region_am_all" class="select_all" value="X" /> Select All</td>
</tr>
<tbody>
<tr>
<td><input type="checkbox" class="region_ct" value="X" /> Argentina</td>
<td class="center"></td>
</tr>
<tr>
<td><input type="checkbox" class="region_ct" value="X" /> Barbados</td>
<td class="center"></td>
</tr>
</tbody>
<tr>
<th colspan=2>Asia</th>
</tr>
</table>

Javascript to Disable checkboxes in a table with variable rows

I have a table which can have variable # of rows. how can I disable all checkboxes at once?
<table border="1" class="myTable grid">
<tr align="center">
<td> </td>
<td>A</td>
</tr>
<tr align="center">
<td>1</td>
<td><input type="checkbox" name="cb1;1" value="1"></td>
</tr>
<td>2</td>
<td><input type="checkbox" name="cb2;1" value="1" checked></td>
</tr>
<tr align="center">
</table>

Here is a javascript only solution that disables all checkboxes in myTable.
document.getElementByClassName("myTable").querySelectorAll("input[type='checkbox']").disabled = true;

A jQuery solution would be:
$('.myTable input[type=checkbox]').attr('disabled', 'disabled');
Alternatively:
document.querySelectorAll('.myTable input[type=checkbox]').disabled = true;

Try utilizing a for loop to iterate NodeList returned by document.querySelectorAll(selectors) , set each [type=checkbox] element to disabled within for statement
var inputs = document.querySelectorAll("[type=checkbox]");
for (var i = 0; i < inputs.length; i++) {
inputs[i].disabled = true;
}
<table border="1" class="myTable grid">
<tbody>
<tr align="center">
<td> </td>
<td>A</td>
</tr>
<tr align="center">
<td>1</td>
<td>
<input type="checkbox" name="cb1;1" value="1">
</td>
</tr>
<td>2</td>
<td>
<input type="checkbox" name="cb2;1" value="1" checked>
</td>
</tr>
<tr align="center">
</tbody>
</table>

Calculate the sum of products using a td attribute

I have this table :
<table>
<thead>
<tr>
<th>Quantity</th>
<th> </th>
<th>Price</th>
<th>Sum</th>
</tr></thead>
<tbody>
<tr class="sum">
<td><input class="qty" type="text" value="1" /></td>
<td>German format: </td>
<td data_price="1375.5">1.375,50 €</td>
<td></td>
</tr>
<tr class="sum">
<td><input class="qty" type="text" value="1" /></td>
<td>English format:</td>
<td data_price="1375.5">€1,375.50</td>
<td></td>
</tr>
<tr class="sum">
<td><input name="text" type="text" class="qty" value="1" /></td>
<td>French format:</td>
<td data_price="1375.5">1 375,50 €</td>
<td></td>
</tr>
<tr class="sum">
<td><input name="text2" type="text" class="qty" value="1" /></td>
<td>Italian format:</td>
<td data_price="1375.5">€1,375.50</td>
<td></td>
</tr>
<tr class="sum">
<td><input class="qty" type="text" value="1" /></td>
<td>Spanish format:</td>
<td data_price="1375.5">€ 1.375,50</td>
<td></td>
</tr>
<tr>
<td colspan="3">Total</td>
<td id="total"></td>
</tr>
</tbody>
</table>
and I want to use the value of attribute "data_price" to calculate the SUM like in this link :
http://jsfiddle.net/QmTNZ/77/
I want to use only the attribute "data_price" in calculation and not the .
Please help, I'm still beginner in jquery :)

For your price cells, you should use this format:
<td data-price="1375.5">€1,375.50</td>
i.e. with a hyphen, not underscore
You can then use:
$('td').data('price')
to access its value - see http://api.jquery.com/data
e.g.
var sum = 0;
$('.sum').each(function() {
var q = parseFloat($(this).find('.qty').val());
var p = parseFloat($(this).find('td').eq(2).data('price'));
sum += q * p;
});
$('#total').text(sum);
Working demo at http://jsfiddle.net/alnitak/gzYhN/

Try
var sum=0;
$('tbody > tr > td[data_price]').each(
function()
{
sum += parseFloat(this.attr('data_price'));
}
);

Try this: http://jsfiddle.net/ptfKJ/
This example is using your original HTML code.