Select all checkboxes in a specific scope?

Select all checkboxes in a specific scope? - javascript

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

Related

two dimensional checkbox in html

I have created a HTML form with checkbox like this, but I am struggle to turn them into two dimensional
<input type="checkbox" id="orange" name="fruit1" value="orange">
<input type="checkbox" id="banana" name="fruit2" value="banana">
<input type="checkbox" id="apple" name="fruit3" value="apple">
<input type="checkbox" id="pear" name="fruit4" value="pear">
<input type="checkbox" id="ripe" name="feature1" value="ripe">
<input type="checkbox" id="price" name="feature2" value="price">
<input type="checkbox" id="quantity" name="feature3" value="quantity">
<input type="checkbox" id="cost" name="feature4" value="cost">
What I want is something like this
orange
banana
apple
pear
ripe
Tick
price
Tick
Tick
Tick
quantity
Tick
Tick
cost
Tick
Any method to achieve this?

You can build an table like below
<form method="POST">
<table class="table table-bordered ">
<thead>
<tr>
<th></th>
<th>orange</th>
<th>banana</th>
<th>apple</th>
<th>pear</th>
</tr>
</thead>
<tbody>
<tr>
<td>ripe</td>
<td><input type="checkbox" name="matrix[ripe][]" value="orange"></td>
<td><input type="checkbox" name="matrix[ripe][]" value="banana"></td>
<td><input type="checkbox" name="matrix[ripe][]" value="apple"></td>
<td><input type="checkbox" name="matrix[ripe][]" value="pear"></td>
</tr>
<tr>
<td>price</td>
<td><input type="checkbox" name="matrix[price][]" value="orange"></td>
<td><input type="checkbox" name="matrix[price][]" value="banana"></td>
<td><input type="checkbox" name="matrix[price][]" value="apple"></td>
<td><input type="checkbox" name="matrix[price][]" value="pear"></td>
</tr>
<tr>
<td>quantity</td>
<td><input type="checkbox" name="matrix[quantity][]" value="orange"></td>
<td><input type="checkbox" name="matrix[quantity][]" value="banana"></td>
<td><input type="checkbox" name="matrix[quantity][]" value="apple"></td>
<td><input type="checkbox" name="matrix[quantity][]" value="pear"></td>
</tr>
<tr>
<td>cost</td>
<td><input type="checkbox" name="matrix[cost][]" value="orange"></td>
<td><input type="checkbox" name="matrix[cost][]" value="banana"></td>
<td><input type="checkbox" name="matrix[cost][]" value="apple"></td>
<td><input type="checkbox" name="matrix[cost][]" value="pear"></td>
</tr>
</tbody>
</table>
<button type="submit">sub</button>
</form>
if you submit form like below
Output of the form like below
Updated :if you are using Laravel
#php
$fruits=[
'orange',
'banana',
'apple',
'pear'
];
$features=['ripe','price','quantity','cost'];
#endphp
<form method="POST">
#csrf
<table class="table table-bordered ">
<thead>
<tr>
<th></th>
#foreach($fruits as $fruit)
<th>{{$fruit}}</th>
#endforeach
</tr>
</thead>
<tbody>
#foreach($features as $value)
<tr>
<td>{{$value}}</td>
#foreach($fruits as $fruit)
<td><input type="checkbox" name="matrix[{{$value}}][]" value="{{$fruit}}"></td>
#endforeach
</tr>
#endforeach
</tbody>
</table>
<button type="submit">sub</button>
</form>
using jquery
<div id="dynamic-content"></div>
<script>
let fruits=[
'orange',
'banana',
'apple',
'pear'
];
let features=['ripe','price','quantity','cost'];
$.each(features , function(index, val) {
console.log(index, val)
});
let html=`<table class="table table-bordered ">
<thead>
<tr>
<th></th>`;
$.each(features , function(index, val) {
html += ` <tr>
<td>${val}</td>`;
$.each(fruits, function (index, val) {
html += `<td><input type="checkbox" name="matrix[${val}][]" value="${val}"></td>`;
})
})
html+=`</tr></tbody>
</table>`;
$('#dynamic-content').html(html)
</script>

I don't fully understand what you want to do. Maybe this works?
<table>
<thead>
<tr>
<th></th>
<th>Orange</th>
<th>Banana</th>
<th>Apple</th>
<th>Pear</th>
</tr>
</thead>
<tbody>
<tr>
<td>ripe</td>
<td><input type="checkbox" id="orange_ripe" /></td>
<td><input type="checkbox" id="Banana_ripe" /></td>
<td><input type="checkbox" id="Apple_ripe" /></td>
<td><input type="checkbox" id="Pear_ripe" /></td>
</tr>
<tr>
<td>price</td>
<td><input type="checkbox" id="orange_price" /></td>
<td><input type="checkbox" id="Banana_price" /></td>
<td><input type="checkbox" id="Apple_price" /></td>
<td><input type="checkbox" id="Pear_price" /></td>
</tr>
<tr>
<td>quantity</td>
<td><input type="checkbox" id="orange_quantity" /></td>
<td><input type="checkbox" id="Banana_quantity" /></td>
<td><input type="checkbox" id="Apple_quantity" /></td>
<td><input type="checkbox" id="Pear_quantity" /></td>
</tr>
<tr>
<td>cost</td>
<td><input type="checkbox" id="orange_cost" /></td>
<td><input type="checkbox" id="Banana_cost" /></td>
<td><input type="checkbox" id="Apple_cost" /></td>
<td><input type="checkbox" id="Pear_cost" /></td>
</tr>
</tbody>
</table>

One way would be to build a table and input in every cell a inputfield with the value x/y.

Display checked in the table according id value in the array

I have a problem displaying checked in the table according to id value in the array if I have to click the Show checked if id values are 1 and 5 button. For example, I want to display checked in the table if id values are 1 and 5.
But I using below sample javascript coding cannot show the selected checked in the table followed by the id value:
Javascript
function show_value() {
var selected_value = "1,5";
var checkbox_state = []
var id_value = []
//use each loop
$("[name=checkbox_val]").each(function() {
checkbox_state.push($(this).is(":checked"))
id_value.push($(this).closest("tr").find("[name=id_value]").val()) //push value in array
$("#checkbox_val").attr("checked", true);
})
var id_value_true = id_value.toString();
if(jQuery.inArray(selected_value, id_value_true) !== -1){
$("#checkbox_val").attr("checked", true);
}else{
$("#checkbox_val").attr("checked", false);
}
console.log("checkbox -- " + checkbox_state.toString() + " ID VALUE --" + id_value.toString())
}
Below is my whole sample coding:
function show_value() {
var selected_value = "1,5";
var checkbox_state = []
var id_value = []
//use each loop
$("[name=checkbox_val]").each(function() {
checkbox_state.push($(this).is(":checked"))
id_value.push($(this).closest("tr").find("[name=id_value]").val()) //push value in array
$("#checkbox_val").attr("checked", true);
})
var id_value_true = id_value.toString();
if(jQuery.inArray(selected_value, id_value_true) !== -1){
$("#checkbox_val").attr("checked", true);
}else{
$("#checkbox_val").attr("checked", false);
}
console.log("checkbox -- " + checkbox_state.toString() + " ID VALUE --" + id_value.toString())
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<style>
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}
td, th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
tr:nth-child(even) {
background-color: #dddddd;
}
</style>
</head>
<body>
<table>
<tr>
<th>Checkbox</th>
<th>ID Value</th>
<th>Contact</th>
<th>Country</th>
</tr>
<tr>
<td><input type="checkbox" id="checkbox_val" name="checkbox_val" value="0"> </td>
<td><input type="text" id="id_value" name="id_value" value="1"/></td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
<tr>
<td><input type="checkbox" id="checkbox_val" name="checkbox_val" value="0"> </td>
<td><input type="text" id="id_value" name="id_value" value="2"/></td>
<td>Francisco Chang</td>
<td>Mexico</td>
</tr>
<tr>
<td><input type="checkbox" id="checkbox_val" name="checkbox_val" value="0"> </td>
<td><input type="text" id="id_value" name="id_value" value="3"/></td>
<td>Roland Mendel</td>
<td>Austria</td>
</tr>
<tr>
<td><input type="checkbox" id="checkbox_val" name="checkbox_val" value="0"> </td>
<td><input type="text" id="id_value" name="id_value" value="4"/></td>
<td>Helen Bennett</td>
<td>UK</td>
</tr>
<tr>
<td><input type="checkbox" id="checkbox_val" name="checkbox_val" value="0"> </td>
<td><input type="text" id="id_value" name="id_value" value="5"/></td>
<td>Yoshi Tannamuri</td>
<td>Canada</td>
</tr>
<tr>
<td><input type="checkbox" id="checkbox_val" name="checkbox_val" value="0"> </td>
<td><input type="text" id="id_value" name="id_value" value="6"/></td>
<td>Giovanni Rovelli</td>
<td>Italy</td>
</tr>
</table></br>
<button type="button" id="updateBtn_5" class="btn btn-sm btn-primary" onclick="show_value()">Show checked if id values are 1 and 5</button>
</body>
</html>
Actually, I want the expected result like below the picture:
Hope someone can guide me on how to solve this problem. Thanks.

The first issue you have is that you are repeating the same id in multiple elements in the DOM which is invalid. id attributes must be unique.
To achieve your goal you can split the selected_values string in to an array and use it to filter() the existing id_value elements to retrieve only those who have a matching value. From there you can traverse the DOM to find the related checkbox and set its checked property to true. Try this:
$('#updateBtn_5').on('click', () => {
var selected_values = "1,5".split(',');
$('input[name="id_value"]')
.filter((i, el) => selected_values.indexOf(el.value) != -1)
.closest('tr').find(':checkbox').prop('checked', true);
})
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}
td,
th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
tr:nth-child(even) {
background-color: #dddddd;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr>
<th>Checkbox</th>
<th>ID Value</th>
<th>Contact</th>
<th>Country</th>
</tr>
<tr>
<td><input type="checkbox" name="checkbox_val" value="0"> </td>
<td><input type="text" name="id_value" value="1" /></td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
<tr>
<td><input type="checkbox" name="checkbox_val" value="0"> </td>
<td><input type="text" name="id_value" value="2" /></td>
<td>Francisco Chang</td>
<td>Mexico</td>
</tr>
<tr>
<td><input type="checkbox" name="checkbox_val" value="0"> </td>
<td><input type="text" name="id_value" value="3" /></td>
<td>Roland Mendel</td>
<td>Austria</td>
</tr>
<tr>
<td><input type="checkbox" name="checkbox_val" value="0"> </td>
<td><input type="text" name="id_value" value="4" /></td>
<td>Helen Bennett</td>
<td>UK</td>
</tr>
<tr>
<td><input type="checkbox" name="checkbox_val" value="0"> </td>
<td><input type="text" name="id_value" value="5" /></td>
<td>Yoshi Tannamuri</td>
<td>Canada</td>
</tr>
<tr>
<td><input type="checkbox" name="checkbox_val" value="0"> </td>
<td><input type="text" name="id_value" value="6" /></td>
<td>Giovanni Rovelli</td>
<td>Italy</td>
</tr>
</table>
<br />
<button type="button" id="updateBtn_5" class="btn btn-sm btn-primary">Show checked if id values are 1 and 5</button>

Get different Column value when current row checkbox is selected

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>

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>

Javascript Select-all checkbox suddenly not working

I have 60 checkboxes with the name "AG[]" and i was using a check-all function to do the job, combined with an eventlistener on buttons that were named CheckAll. Suddenly the buttons stopped working..
The select-all function is
function selectAll(a,b) {
var checkies = document.getElementsByName('AG[]');
for (var i = a;i < b;i++) {
checkies[i].checked = !(checkies[i].checked);
}
}
which works, because I tried onloading one run of this function.
This is the full script onload that adds the event listener on the buttons.
function script1() {
var el = document.getElementsByName('CheckAll');
el1 = el[0];
el2 = el[1];
el3 = el[2];
el4 = el[3];
el5 = el[4];
el6 = el[5];
el7 = el[6];
el1.addEventListener('click', function(){selectAll(0,8)}, false);
el2.addEventListener('click', function(){selectAll(8,16)}, false);
el3.addEventListener('click', function(){selectAll(16,26)}, false);
el4.addEventListener('click', function(){selectAll(26,34)}, false);
el5.addEventListener('click', function(){selectAll(34,44)}, false);
el6.addEventListener('click', function(){selectAll(44,52)}, false);
el7.addEventListener('click', function(){selectAll(52,60)}, false);
}
If i run the function by itself like
SelectAll(0,8);
it works, but if I do it through addeventlistener it does not.
The code was working well and I was able to check-all with buttons but i dont get what happened..
Here's the jsfiddle jsfiddle
*Okay new problem. * the code that Andreas posted is still not working for me which probably means its because im running it from IE7, which does not support addeventlistener. So how do i make my code support firefox/chrome(Addeventlistener) and

Keeping addEventListener vs onclick in mind, the pragmatic and simple version is the following since it works in all browsers - downside as mentioned in the link is onlick supports only one event handler, while attachevent/addEventListener will fire all registered callbacks.
DEMO
function selectAll(a,b) {
var checkies = document.getElementsByName('AG[]');
for (var i = a;i < b;i++) {
checkies[i].checked = !checkies[i].checked;
}
}
function script1(){
var el = document.getElementsByName('CheckAll'); // get all elements with that name="" attribute
el[0].onclick=function() { selectAll(0,8) }
el[1].onclick=function() { selectAll(8,16)}
el[2].onclick=function() { selectAll(16,26)}
el[3].onclick=function() { selectAll(26,34)}
el[4].onclick=function() { selectAll(34,44)}
el[5].onclick=function() { selectAll(44,52)}
el[6].onclick=function() { selectAll(52,60)}
}

I've made some changes to work in IE < 9, i.e.
addEvent(el1, 'click', function(){selectAll(0,8)},false);
function addEvent(el, event, callback, bubble){
if(el.addEventListener) el.addEventListener(event, callback, bubble);
else if(el.attachEvent) el.attachEvent('on'+event, callback, bubble);
}
Complete Demo.

You forgot to put the word function before script1() so you got an error because it didn't know what script1() was on your body onload. I tried this code out (pretty much a copy and paste (I don't like JS fiddle all the time) and it seems to work.
<!DOCTYPE html>
<html>
<style>
html, body { height: 100%; }
#container { margin-top: 29px; }
header { height:29px; margin: 0 49px; background-color:#999999; }
#div1 { width: 29px; height: 100%; background-color: yellow; display: inline-block; }
#div2 { width: 100%; height: 100%; background-color: blue; display: inline-block; }
#div3 { width: 29px; height: 100%; background-color: red; display: inline-block; float: right;}
#div4 { height: 100%; background-color: yellow; display: inline-block; float: right; }
</style>
<body>
<body onload="script1();">
Please check the box if you took a course in the respective subject in that semester.
<table width="200" border="1">
<tr>
<th scope="col"></th>
<th scope="col">8th Sem 1</th>
<th scope="col">8th Sem 2</th>
<th scope="col">9th Sem 1</th>
<th scope="col">9th Sem 2</th>
<th scope="col">10th Sem 1</th>
<th scope="col">10th Sem 2</th>
<th scope="col">11th Sem 1</th>
<th scope="col">11th Sem 2</th>
<th scope="col">12th Sem 1</th>
<th scope="col">12th Sem 2</th>
<th scope="col">Select All Semesters</th>
</tr>
<tr>
<th scope="row">History</th>
<td></td>
<td></td>
<td><input name="AG[]" type="checkbox" value="A9Sem1"></td>
<td><input name="AG[]" type="checkbox" value="A9Sem2"></td>
<td><input name="AG[]" type="checkbox" value="A10Sem1"></td>
<td><input name="AG[]" type="checkbox" value="A10Sem2"></td>
<td><input name="AG[]" type="checkbox" value="A11Sem1"></td>
<td><input name="AG[]" type="checkbox" value="A11Sem2"></td>
<td><input name="AG[]" type="checkbox" value="A12Sem1"></td>
<td><input name="AG[]" type="checkbox" value="A12Sem2"></td>
<td><input type="button" name="CheckAll" value="Check All"></td>
</tr>
<tr>
<th scope="row">English</th>
<td></td>
<td></td>
<td><input name="AG[]" type="checkbox" value="B9Sem1"></td>
<td><input name="AG[]" type="checkbox" value="B9Sem2"></td>
<td><input name="AG[]" type="checkbox" value="B10Sem1"></td>
<td><input name="AG[]" type="checkbox" value="B10Sem2"></td>
<td><input name="AG[]" type="checkbox" value="B11Sem1"></td>
<td><input name="AG[]" type="checkbox" value="B11Sem2"></td>
<td><input name="AG[]" type="checkbox" value="B12Sem1"></td>
<td><input name="AG[]" type="checkbox" value="B12Sem2"></td>
<td> <input type="button" name="CheckAll" value="Check All"></td>
</tr>
<tr>
<th scope="row">Mathematics</th>
<td><input name="AG[]" type="checkbox" value="C8Sem1">*</td>
<td><input name="AG[]" type="checkbox" value="C8Sem2">*</td>
<td><input name="AG[]" type="checkbox" value="C9Sem1"></td>
<td><input name="AG[]" type="checkbox" value="C9Sem2"></td>
<td><input name="AG[]" type="checkbox" value="C10Sem1"></td>
<td><input name="AG[]" type="checkbox" value="C10Sem2"></td>
<td><input name="AG[]" type="checkbox" value="C11Sem1"></td>
<td><input name="AG[]" type="checkbox" value="C11Sem2"></td>
<td><input name="AG[]" type="checkbox" value="C12Sem1"></td>
<td><input name="AG[]" type="checkbox" value="C12Sem2"></td>
<td> <input type="button" name="CheckAll" value="Check All"></td>
</tr>
<tr>
<th scope="row">Science</th>
<td></td>
<td></td>
<td><input name="AG[]" type="checkbox" value="D9Sem1"></td>
<td><input name="AG[]" type="checkbox" value="D9Sem2"></td>
<td><input name="AG[]" type="checkbox" value="D10Sem1"></td>
<td><input name="AG[]" type="checkbox" value="D10Sem2"></td>
<td><input name="AG[]" type="checkbox" value="D11Sem1"></td>
<td><input name="AG[]" type="checkbox" value="D11Sem2"></td>
<td><input name="AG[]" type="checkbox" value="D12Sem1"></td>
<td><input name="AG[]" type="checkbox" value="D12Sem2"></td>
<td> <input type="button" name="CheckAll" value="Check All"></td>
</tr>
<tr>
<th scope="row">Foreign Language</th>
<td><input name="AG[]" type="checkbox" value="E8Sem1"></td>
<td><input name="AG[]" type="checkbox" value="E8Sem2"></td>
<td><input name="AG[]" type="checkbox" value="E9Sem1"></td>
<td><input name="AG[]" type="checkbox" value="E9Sem2"></td>
<td><input name="AG[]" type="checkbox" value="E10Sem1"></td>
<td><input name="AG[]" type="checkbox" value="E10Sem2"></td>
<td><input name="AG[]" type="checkbox" value="E11Sem1"></td>
<td><input name="AG[]" type="checkbox" value="E11Sem2"></td>
<td><input name="AG[]" type="checkbox" value="E12Sem1"></td>
<td><input name="AG[]" type="checkbox" value="E12Sem2"></td>
<td> <input type="button" name="CheckAll" value="Check All"></td>
</tr>
<tr>
<th scope="row">Visual and Performing Arts</th>
<td></td>
<td></td>
<td><input name="AG[]" type="checkbox" value="F9Sem1"></td>
<td><input name="AG[]" type="checkbox" value="F9Sem2"></td>
<td><input name="AG[]" type="checkbox" value="F10Sem1"></td>
<td><input name="AG[]" type="checkbox" value="F10Sem2"></td>
<td><input name="AG[]" type="checkbox" value="F11Sem1"></td>
<td><input name="AG[]" type="checkbox" value="F11Sem2"></td>
<td><input name="AG[]" type="checkbox" value="F12Sem1"></td>
<td><input name="AG[]" type="checkbox" value="F12Sem2"></td>
<td> <input type="button" name="CheckAll" value="Check All"></td>
</tr>
<tr>
<th scope="row">Electives</th>
<td></td>
<td></td>
<td><input name="AG[]" type="checkbox" value="G9Sem1"></td>
<td><input name="AG[]" type="checkbox" value="G9Sem2"></td>
<td><input name="AG[]" type="checkbox" value="G10Sem1"></td>
<td><input name="AG[]" type="checkbox" value="G10Sem2"></td>
<td><input name="AG[]" type="checkbox" value="G11Sem1"></td>
<td><input name="AG[]" type="checkbox" value="G11Sem2"></td>
<td><input name="AG[]" type="checkbox" value="G12Sem1"></td>
<td><input name="AG[]" type="checkbox" value="G12Sem2"></td>
<td> <input type="button" name="CheckAll" value="Check All"></td>
</tr>
</table>
</body>
<script>
function selectAll(a,b) {
var checkies = document.getElementsByName('AG[]');
for (var i = a;i < b;i++) {
checkies[i].checked = !(checkies[i].checked);
}
}
function script1(){
var el = document.getElementsByName('CheckAll'); // get all elements with that name="" attribute
el1 = el[0]; // get the first element (in this case, being the only one)
el2 = el[1];
el3 = el[2];
el4 = el[3];
el5 = el[4];
el6 = el[5];
el7 = el[6];
// now we have an element to call the method on
el1.addEventListener('click', function(){selectAll(0,8)}, false);
el2.addEventListener('click', function(){selectAll(8,16)}, false);
el3.addEventListener('click', function(){selectAll(16,26)}, false);
el4.addEventListener('click', function(){selectAll(26,34)}, false);
el5.addEventListener('click', function(){selectAll(34,44)}, false);
el6.addEventListener('click', function(){selectAll(44,52)}, false);
el7.addEventListener('click', function(){selectAll(52,60)}, false);
}
</script>
</html>

Develop Reference

JavaScript is the programming language of the Web.

Select all checkboxes in a specific scope? - javascript

Related

two dimensional checkbox in html

Display checked in the table according id value in the array

Get different Column value when current row checkbox is selected

How can I get the value of the last th?

Javascript Select-all checkbox suddenly not working

Categories

Resources