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>
Related
I have been looking around everywhere for a solution and I just can't find any.
What I'm trying to do here is get the third column value i.e price when the checkbox in the first column is selected. I'll eventually use the column value to calculate the total which will be thrown into a div.
<body>
<form action="" method="post"><table id="tableid">
<tr>
<th><b>Menu:</b></th>
</tr>
<tr>
<th></th>
<th>Item</th>
<th>Price</th>
</tr>
<tr>
<td><input type="checkbox" class="chkbx" name="item" value="27"></td>
<td>Item1</td>
<td class="">100</td>
</tr>
<tr>
<td><input type="checkbox" class="chkbx" name="item" value="28"></td>
<td>Item2</td><td class="">200</td>
</tr>
<tr>
<td><input type="checkbox" class="chkbx" name="item" value="29"></td>
<td>Item3</td>
<td class="">300</td>
</tr>
<tr>
<td><input type="checkbox" class="chkbx" name="item" value="30"></td>
<td>Item4</td>
<td class="">400</td>
</tr>
</table>
</form>
<div id="container"></div>
</body>
I've tried several options from $(this).parent().find()....and nth-child() but i don't seem to be getting how "this" works
sample code:
$(document).ready(function(){
$('.chkbx').change(function(){
$('.chkbx:checked').each(function(){
total+=parseInt($(this).parent().find("td").text());
});
//var item=$(".chkbx tr:nth-child(2)").text();
$("#container").html(total);
});
});
Is my approach wrong? How should I go about this? Will using classes be of any help?
Thanks in Advance!!
P.S: Very new to JS and JQuery.
You need to target last td element so you can use .closest() to traverse up-to <TR> then use .eq(index)1 to target the desired element
total+= parseInt($(this).closest('tr').find("td:eq(2)").text(), 10);
$(document).ready(function() {
$('.chkbx').change(function() {
var total = 0;
$('.chkbx:checked').each(function() {
total += parseInt($(this).closest('tr').find("td:eq(2)").text(), 10);
});
console.clear();
console.log(total);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="tableid">
<tr>
<th><b>Menu:</b></th>
</tr>
<tr>
<th></th>
<th>Item</th>
<th>Price</th>
</tr>
<tr>
<td><input type="checkbox" class="chkbx" name="item" value="27"></td>
<td>Item1</td>
<td class="">100</td>
</tr>
<tr>
<td><input type="checkbox" class="chkbx" name="item" value="28"></td>
<td>Item2</td>
<td class="">200</td>
</tr>
<tr>
<td><input type="checkbox" class="chkbx" name="item" value="29"></td>
<td>Item3</td>
<td class="">300</td>
</tr>
<tr>
<td><input type="checkbox" class="chkbx" name="item" value="30"></td>
<td>Item4</td>
<td class="">400</td>
</tr>
</table>
1I would recommend, assigning a CSS class to target the element rather than using index.
HTML
<td class="price">400</td>
Script
total+= parseInt($(this).closest('tr').find("td.price").text(), 10);
You can use siblings with last like this.
$(this).parent().siblings(":last").text();
Use need to use closest() to find the tr then use find with :nth-child() to get the specific td
$(document).ready(function(){
$('.chkbx').change(function(){
var total = 0;
$('.chkbx:checked').each(function(){
total+=parseInt($(this).closest('tr').find("td:nth-child(3)").text());
});
//var item=$(".chkbx tr:nth-child(2)").text();
$("#container").text(total);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="" method="post"><table id="tableid">
<tr>
<th><b>Menu:</b></th>
</tr>
<tr>
<th></th>
<th>Item</th>
<th>Price</th>
</tr>
<tr>
<td><input type="checkbox" class="chkbx" name="item" value="27"></td>
<td>Item1</td>
<td class="">100</td>
</tr>
<tr>
<td><input type="checkbox" class="chkbx" name="item" value="28"></td>
<td>Item2</td><td class="">200</td>
</tr>
<tr>
<td><input type="checkbox" class="chkbx" name="item" value="29"></td>
<td>Item3</td>
<td class="">300</td>
</tr>
<tr>
<td><input type="checkbox" class="chkbx" name="item" value="30"></td>
<td>Item4</td>
<td class="">400</td>
</tr>
</table>
</form>
<span id='container'> </span>
You were not tracking the TD for price column correctly, and you need to declare the total variable outside the .each() otherwise the scope wont allow to access the variable and populate the total, see below for a demo
var total = 0;
$(document).ready(function() {
$('.chkbx').change(function() {
$('.chkbx:checked').each(function() {
//console.log($(this).parent().next().next().text());
total += parseInt($(this).parent().next().next().text());
});
//var item=$(".chkbx tr:nth-child(2)").text();
$("#container").html(total);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
TOTAL
<div id="container"></div>
<form action="" method="post">
<table id="tableid">
<tr>
<th><b>Menu:</b></th>
</tr>
<tr>
<th></th>
<th>Item</th>
<th>Price</th>
</tr>
<tr>
<td><input type="checkbox" class="chkbx" name="item" value="27"></td>
<td>Item1</td>
<td class="">100</td>
</tr>
<tr>
<td><input type="checkbox" class="chkbx" name="item" value="28"></td>
<td>Item2</td>
<td class="">200</td>
</tr>
<tr>
<td><input type="checkbox" class="chkbx" name="item" value="29"></td>
<td>Item3</td>
<td class="">300</td>
</tr>
<tr>
<td><input type="checkbox" class="chkbx" name="item" value="30"></td>
<td>Item4</td>
<td class="">400</td>
</tr>
</table>
</form>
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
Display respective text box when checkbox is checked in the table which is inside the form.
The rows will generate dynamically depending upon the data send from the server, along with the data.
When the checkbox is checked the text box of that row should be displayed otherwise it should be hidden
<div class="container-fluid">
<form class="available-products-table">
<table class="table">
<fieldset>
<legend>Avaliable Products</legend>
<thead>
<tr>
<th>S.no</th>
<th>Product Name</th>
<th>Quanity</th>
<th>Brand</th>
<th>Color</th>
<th>Status</th>
<th>Quanity</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Shoes</td>
<td>50</td>
<td>adidas</td>
<td>Black</td>
<td><input type="checkbox" name="product-status" id="product-status"/></td>
<td><input type="text" name="send-quality" id="send-quality"/></td>
</tr>
<tr>
<td>1</td>
<td>Shoes</td>
<td>50</td>
<td>adidas</td>
<td>Black</td>
<td><input type="checkbox" name="product-status" id="product-status"/></td>
<td><input type="text" name="send-quality" id="send-quality"/></td>
</tr>
<tr>
<td>1</td>
<td>Shoes</td>
<td>50</td>
<td>adidas</td>
<td>Black</td>
<td><input type="checkbox" name="product-status" id="product-status"/></td>
<td><input type="text" name="send-quality" id="send-quality"/></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td>Enter Franchise ID</td>
<td><input type="text" name="send-franchise-is" id="product-status" required/></td>
<td><input type="submit" name="submit" value="submit" class="btn btn-primary/"></td>
</tr>
</tbody>
</fieldset>
</table>
</form>
</div>
You can try this:
$(".table input[name='product-status']").change(function(){
if($(this).is(":checked")){
$(this).parents("tr:eq(0)").find("input[name='send-quality']").show();
}
else{
$(this).parents("tr:eq(0)").find("input[name='send-quality']").hide();
}
});
input[name='send-quality']
{
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container-fluid">
<form class="available-products-table">
<table class="table">
<fieldset>
<legend>Avaliable Products</legend>
<thead>
<tr>
<th>S.no</th>
<th>Product Name</th>
<th>Quanity</th>
<th>Brand</th>
<th>Color</th>
<th>Status</th>
<th>Quanity</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Shoes</td>
<td>50</td>
<td>adidas</td>
<td>Black</td>
<td><input type="checkbox" name="product-status" id="product-status"></td>
<td><input type="text" name="send-quality" id="send-quality"</td>
</tr>
<tr>
<td>1</td>
<td>Shoes</td>
<td>50</td>
<td>adidas</td>
<td>Black</td>
<td><input type="checkbox" name="product-status" id="product-status"></td>
<td><input type="text" name="send-quality" id="send-quality"></td>
</tr>
<tr>
<td>1</td>
<td>Shoes</td>
<td>50</td>
<td>adidas</td>
<td>Black</td>
<td><input type="checkbox" name="product-status" id="product-status"></td>
<td><input type="text" name="send-quality" id="send-quality"></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td>Enter Franchise ID</td>
<td><input type="text" name="send-franchise-is" id="product-status" required></td>
<td><input type="submit" name="submit" value="submit" class="btn btn-primary"></td>
</tr>
</tbody>
</fieldset>
</table>
</form>
</div>
Using $(this).is(":checked"), see if the checkbox is checked. If it is checked, show the relevant input box. I have added a class hidden to each input box for this demo:
$('input[type=checkbox]').on('click', function() {
if ($(this).is(":checked"))
$(this).parents("tr:first").find('.hidden').show();
else
$(this).parents("tr:first").find('.hidden').hide();
})
.hidden {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container-fluid">
<form class="available-products-table">
<table class="table">
<fieldset>
<legend>Avaliable Products</legend>
<thead>
<tr>
<th>S.no</th>
<th>Product Name</th>
<th>Quanity</th>
<th>Brand</th>
<th>Color</th>
<th>Status</th>
<th>Quanity</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Shoes</td>
<td>50</td>
<td>adidas</td>
<td>Black</td>
<td><input type="checkbox" name="product-status" id="product-status"></td>
<td><input type="text" class='hidden' name="send-quality" id="send-quality" /> </td>
</tr>
<tr>
<td>1</td>
<td>Shoes</td>
<td>50</td>
<td>adidas</td>
<td>Black</td>
<td><input type="checkbox" name="product-status" id="product-status"></td>
<td><input type="text" class='hidden' name="send-quality" id="send-quality"></td>
</tr>
<tr>
<td>1</td>
<td>Shoes</td>
<td>50</td>
<td>adidas</td>
<td>Black</td>
<td><input type="checkbox" name="product-status" id="product-status"></td>
<td><input type="text" class='hidden' name="send-quality" id="send-quality"></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td>Enter Franchise ID</td>
<td><input type="text" name="send-franchise-is" id="product-status" required></td>
<td><input type="submit" name="submit" value="submit" class="btn btn-primary"></td>
</tr>
</tbody>
</fieldset>
</table>
</form>
</div>
I want When single checkbox is selected that time Edit and Delete Button are Enable, Add Button Disable
When Two or more checkbox are selected that time Delete Button is Enable and Add and Edit Button are Disable
My Html Code :
<div>
<button type="button" id="btnAddID" name="btnAdd"> Add </button>
<button type="button" id="btnEditID" name="btnEdit"> Edit </button>
<button type="button" id="btnDeleteID" name="btnDelete"> Delete </button>
</div>
<br/>
<div>
<table>
<thead>
<tr>
<th></th>
<th>ID</th>
<th>Name</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox" /></td>
<td>1</td>
<td>ABC</td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>2</td>
<td>XYZ</td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>3</td>
<td>PQR</td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>4</td>
<td>MLN</td>
</tr>
</tbody>
</table>
</div>
</div>
I guess this snippet is what you need.
This is the simplest way but you could do better if you want.
$(document).ready(function(){
$('input[type=checkbox]').change(function(){
var count = 0;
$.each($('input[type=checkbox]'), function(){
if($(this).prop('checked') == true){
count++;
}
});
if(count == 1) {
$('#btnEditID').prop('disabled', false);
$('#btnDeleteID').prop('disabled', false);
$('#btnAddID').prop('disabled', true);
}
else {
$('#btnDeleteID').prop('disabled', false);
$('#btnEditID').prop('disabled', true);
$('#btnAddID').prop('disabled', true);
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div>
<button type="button" id="btnAddID" name="btnAdd"> Add </button>
<button type="button" id="btnEditID" name="btnEdit"> Edit </button>
<button type="button" id="btnDeleteID" name="btnDelete"> Delete </button>
</div>
<br/>
<div>
<table>
<thead>
<tr>
<th></th>
<th>ID</th>
<th>Name</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox" /></td>
<td>1</td>
<td>ABC</td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>2</td>
<td>XYZ</td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>3</td>
<td>PQR</td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>4</td>
<td>MLN</td>
</tr>
</tbody>
</table>
</div>
</div>
Try this:
$('input[type="checkbox"]').change(function(){
var checked = $('input[type="checkbox"]:checked').length;
if(checked === 0){
$("button").prop('disabled',false);
}else if(checked === 1){
$("button").prop('disabled',false);
$("#btnAddID").prop('disabled', true);
}else{
$("#btnAddID,#btnEditID").prop('disabled', true);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<button type="button" id="btnAddID" name="btnAdd"> Add </button>
<button type="button" id="btnEditID" name="btnEdit"> Edit </button>
<button type="button" id="btnDeleteID" name="btnDelete"> Delete </button>
</div>
<br/>
<div>
<table>
<thead>
<tr>
<th></th>
<th>ID</th>
<th>Name</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox" /></td>
<td>1</td>
<td>ABC</td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>2</td>
<td>XYZ</td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>3</td>
<td>PQR</td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>4</td>
<td>MLN</td>
</tr>
</tbody>
</table>
</div>
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>