Checkbox colors based on mySQL - javascript

Very new to coding and had to build a reservation app over the last few weeks. I am trying to get results back if the seats are already booked and:
prevent the seat from being booked again (error message)
change the checkbox color to red
I chose to use checkboxes but if you have a beautiful array or table I could use I'm open to suggestions. The seats are supposed to be red if booked, green if booked by current active user, and white if not booked.
Currently the flow is seats.html -> cart.php -> reserve.php (the order is different, I mostly need help with reserve.php and seats.html.
Thanks for taking the time to read this.
--reserve.php--
<?php session_start();
include 'dbh.php';
$seat = $_GET['seat'];
$id = $_SESSION['id'];
//this was supposed to check for seats already booked but I couldn't get it to work :[
$checkseat = "SELECT * FROM reservations WHERE seat = '$_GET[seat]'";
$rs = mysqli_query($connection,$checkseat);
$data = mysqli_fetch_row($rs);
if($data[0] > 1) {
echo "Seat is already reserved<br/>";
}
else
{
$newSeat="INSERT INTO reservations (id, seat)
VALUES ('$id','$seat')";
if (mysqli_query($connection,$newSeat))
{
echo "$seat is booked for user: $id";
}
else
{
echo "Error: Seat already booked.<br/>";
}
}
--seats.html--
<?php session_start(); include 'dbh.php'; $seat=$ _GET[ 'seat']; ?>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Select Seats</title>
</head>
<body>
<div id="mycounter2"></div>
<!--script for timer on page load-->
<script>
i = 60;
function onTimer2() {
document.getElementById('mycounter2').innerHTML = i;
i--;
onclick = function() {
i = 60;
}
if (i < 0) {
alert('Your seat selection has been reset.');
window.location.reload();
} else {
setTimeout(onTimer2, 1000);
}
}
window.onload = onTimer2;
</script> seconds until seats are cleared.
<br />
<br />
<style type="text/css">
.tg {
border-collapse: collapse;
border-spacing: 0;
border-color: #999;
}
.tg td {
font-family: Arial, sans-serif;
font-size: 14px;
padding: 10px 5px;
border-style: solid;
border-width: 1px;
overflow: hidden;
word-break: normal;
border-color: #999;
color: #444;
background-color: #F7FDFA;
}
.tg th {
font-family: Arial, sans-serif;
font-size: 14px;
font-weight: normal;
padding: 10px 5px;
border-style: solid;
border-width: 1px;
overflow: hidden;
word-break: normal;
border-color: #999;
color: #fff;
background-color: #26ADE4;
}
.tg .tg-yw4l {
vertical-align: top
}
#media screen and (max-width: 767px) {
.tg {
width: auto !important;
}
.tg col {
width: auto !important;
}
.tg-wrap {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
}
</style>
<h1>Reserve Seats</h1>
<!--script for timer on page load-->
<script>
i = 60;
function onTimer() {
alert("test");
document.getElementById('mycounter').innerHTML = i;
i--;
if (i < 0) {
alert('No activity, seats not held.');
} else {
setTimeout(onTimer, 1000);
}
}
</script>
<!--the below script prevents users from selecting more than 4 seats-->
<script type="text/javascript">
function checkboxlimit(checkgroup, limit) {
var checkgroup = checkgroup
var limit = limit
for (var i = 0; i < checkgroup.length; i++) {
checkgroup[i].onclick = function() {
var checkedcount = 0
for (var i = 0; i < checkgroup.length; i++)
checkedcount += (checkgroup[i].checked) ? 1 : 0
if (checkedcount > limit) {
alert("You can select a maximum of " + limit + " seats")
this.checked = false
}
}
}
}
</script>
<div class="tg-wrap">
<table class="tg">
<form id="reserve" name="reserve" action="cart.php" method="post">
<tr>
<th class="tg-yw4l"></th>
<th class="tg-yw4l">1</th>
<th class="tg-yw4l">2</th>
<th class="tg-yw4l">3</th>
<th class="tg-yw4l">4</th>
<th class="tg-yw4l">5</th>
<th class="tg-yw4l">6</th>
<th class="tg-yw4l">7</th>
<th class="tg-yw4l">8</th>
<th class="tg-yw4l">9</th>
<th class="tg-yw4l">10</th>
<th class="tg-yw4l">11</th>
<th class="tg-yw4l">12</th>
<th class="tg-yw4l">13</th>
<th class="tg-yw4l">14</th>
<th class="tg-yw4l">15</th>
<th class="tg-yw4l">16</th>
<th class="tg-yw4l">17</th>
<th class="tg-yw4l">18</th>
<th class="tg-yw4l">19</th>
<th class="tg-yw4l">20</th>
</tr>
<tr>
<td>A</td>
<td><input type="checkbox" name="seat[]" value="A1">A1</td>
<td><input type="checkbox" name="seat[]" value="A2">A2</td>
<td><input type="checkbox" name="seat[]" value="A3">A3</td>
<td><input type="checkbox" name="seat[]" value="A4">A4</td>
<td><input type="checkbox" name="seat[]" value="A5">A5</td>
<td><input type="checkbox" name="seat[]" value="A6">A6</td>
<td><input type="checkbox" name="seat[]" value="A7">A7</td>
<td><input type="checkbox" name="seat[]" value="A8">A8</td>
<td><input type="checkbox" name="seat[]" value="A9">A9</td>
<td><input type="checkbox" name="seat[]" value="A10">A10</td>
<td><input type="checkbox" name="seat[]" value="A11">A11</td>
<td><input type="checkbox" name="seat[]" value="A12">A12</td>
<td><input type="checkbox" name="seat[]" value="A13">A13</td>
<td><input type="checkbox" name="seat[]" value="A14">A14</td>
<td><input type="checkbox" name="seat[]" value="A15">A15</td>
<td><input type="checkbox" name="seat[]" value="A16">A16</td>
<td><input type="checkbox" name="seat[]" value="A17">A17</td>
<td><input type="checkbox" name="seat[]" value="A18">A18</td>
<td><input type="checkbox" name="seat[]" value="A19">A19</td>
<td><input type="checkbox" name="seat[]" value="A20">A20</td>
</tr>
<tr>
<td>B</td>
<td><input type="checkbox" name="seat[]" value="B1">B1</td>
<td><input type="checkbox" name="seat[]" value="B2">B2</td>
<td><input type="checkbox" name="seat[]" value="B3">B3</td>
<td><input type="checkbox" name="seat[]" value="B4">B4</td>
<td><input type="checkbox" name="seat[]" value="B5">B5</td>
<td><input type="checkbox" name="seat[]" value="B6">B6</td>
<td><input type="checkbox" name="seat[]" value="B7">B7</td>
<td><input type="checkbox" name="seat[]" value="B8">B8</td>
<td><input type="checkbox" name="seat[]" value="B9">B9</td>
<td><input type="checkbox" name="seat[]" value="B10">B10</td>
<td><input type="checkbox" name="seat[]" value="B11">B11</td>
<td><input type="checkbox" name="seat[]" value="B12">B12</td>
<td><input type="checkbox" name="seat[]" value="B13">B13</td>
<td><input type="checkbox" name="seat[]" value="B14">B14</td>
<td><input type="checkbox" name="seat[]" value="B15">B15</td>
<td><input type="checkbox" name="seat[]" value="B16">B16</td>
<td><input type="checkbox" name="seat[]" value="B17">B17</td>
<td><input type="checkbox" name="seat[]" value="B18">B18</td>
<td><input type="checkbox" name="seat[]" value="B19">B19</td>
<td><input type="checkbox" name="seat[]" value="B20">B20</td>
</tr>
<tr>
<td>C</td>
<td><input type="checkbox" name="seat[]" value="C1">C1</td>
<td><input type="checkbox" name="seat[]" value="C2">C2</td>
<td><input type="checkbox" name="seat[]" value="C3">C3</td>
<td><input type="checkbox" name="seat[]" value="C4">C4</td>
<td><input type="checkbox" name="seat[]" value="C5">C5</td>
<td><input type="checkbox" name="seat[]" value="C6">C6</td>
<td><input type="checkbox" name="seat[]" value="C7">C7</td>
<td><input type="checkbox" name="seat[]" value="C8">C8</td>
<td><input type="checkbox" name="seat[]" value="C9">C9</td>
<td><input type="checkbox" name="seat[]" value="C10">C10</td>
<td><input type="checkbox" name="seat[]" value="C11">C11</td>
<td><input type="checkbox" name="seat[]" value="C12">C12</td>
<td><input type="checkbox" name="seat[]" value="C13">C13</td>
<td><input type="checkbox" name="seat[]" value="C14">C14</td>
<td><input type="checkbox" name="seat[]" value="C15">C15</td>
<td><input type="checkbox" name="seat[]" value="C16">C16</td>
<td><input type="checkbox" name="seat[]" value="C17">C17</td>
<td><input type="checkbox" name="seat[]" value="C18">C18</td>
<td><input type="checkbox" name="seat[]" value="C19">C19</td>
<td><input type="checkbox" name="seat[]" value="C20">C20</td>
</tr>
<tr>
<td>D</td>
<td><input type="checkbox" name="seat[]" value="D1">D1</td>
<td><input type="checkbox" name="seat[]" value="D2">D2</td>
<td><input type="checkbox" name="seat[]" value="D3">D3</td>
<td><input type="checkbox" name="seat[]" value="D4">D4</td>
<td><input type="checkbox" name="seat[]" value="D5">D5</td>
<td><input type="checkbox" name="seat[]" value="D6">D6</td>
<td><input type="checkbox" name="seat[]" value="D7">D7</td>
<td><input type="checkbox" name="seat[]" value="D8">D8</td>
<td><input type="checkbox" name="seat[]" value="D9">D9</td>
<td><input type="checkbox" name="seat[]" value="D10">D10</td>
<td><input type="checkbox" name="seat[]" value="D11">D11</td>
<td><input type="checkbox" name="seat[]" value="D12">D12</td>
<td><input type="checkbox" name="seat[]" value="D13">D13</td>
<td><input type="checkbox" name="seat[]" value="D14">D14</td>
<td><input type="checkbox" name="seat[]" value="D15">D15</td>
<td><input type="checkbox" name="seat[]" value="D16">D16</td>
<td><input type="checkbox" name="seat[]" value="D17">D17</td>
<td><input type="checkbox" name="seat[]" value="D18">D18</td>
<td><input type="checkbox" name="seat[]" value="D19">D19</td>
<td><input type="checkbox" name="seat[]" value="D20">D20</td>
</tr>
<tr>
<td>E</td>
<td><input type="checkbox" name="seat[]" value="E1">E1</td>
<td><input type="checkbox" name="seat[]" value="E2">E2</td>
<td><input type="checkbox" name="seat[]" value="E3">E3</td>
<td><input type="checkbox" name="seat[]" value="E4">E4</td>
<td><input type="checkbox" name="seat[]" value="E5">E5</td>
<td><input type="checkbox" name="seat[]" value="E6">E6</td>
<td><input type="checkbox" name="seat[]" value="E7">E7</td>
<td><input type="checkbox" name="seat[]" value="E8">E8</td>
<td><input type="checkbox" name="seat[]" value="E9">E9</td>
<td><input type="checkbox" name="seat[]" value="E10">E10</td>
<td><input type="checkbox" name="seat[]" value="E11">E11</td>
<td><input type="checkbox" name="seat[]" value="E12">E12</td>
<td><input type="checkbox" name="seat[]" value="E13">E13</td>
<td><input type="checkbox" name="seat[]" value="E14">E14</td>
<td><input type="checkbox" name="seat[]" value="E15">E15</td>
<td><input type="checkbox" name="seat[]" value="E16">E16</td>
<td><input type="checkbox" name="seat[]" value="E17">E17</td>
<td><input type="checkbox" name="seat[]" value="E18">E18</td>
<td><input type="checkbox" name="seat[]" value="E19">E19</td>
<td><input type="checkbox" name="seat[]" value="E20">E20</td>
</tr>
</table>
<input type="submit" value="Submit">
</form>
<script type="text/javascript">
checkboxlimit(document.forms.reserve["seat[]"], 4)
</script>
<!--timer script below resets page after 60 seconds of no clicks-->
<div id="mycounter"></div>
<script>
i = 60;
function onTimer() {
$("submit").show(1000);
document.getElementById('mycounter').innerHTML = i;
i--;
if (i < 0) {
alert('Your reservation has timed out.');
} else {
setTimeout(onTimer, 1000);
}
}
</script>
<button type="submit" class="button button-block" />Log Out
</button>
<?php echo "string"; </body>
</html>
--cart.php--
<?php session_start();
include 'dbh.php';
//seat from previous page selection
$seat = implode(', ', $_POST['seat']);
$id = $_SESSION['id'];
?>
<html>
<head>
<title>Shopping Cart</title>
</head>
<body>
<?php
echo "Shopping Cart <br /><br /> $id's Seats: $seat <br /><br /> Please confirm within 60 seconds.<br /><br />";
?>
<div id="mycounter"></div>
<!--script for timer on page load-->
<script>
i = 60;
function onTimer() {
document.getElementById('mycounter').innerHTML = i;
i--;
if (i < 0) {
alert('Your reservation has timed out.');
window.history.back();
}
else {
setTimeout(onTimer, 1000);
}
}
window.onload = onTimer;
</script>
<br />
<br />
<?php
echo '<button>Confirm</button>';?>
<button type="submit" class="button button-block"/>Cancel</button>
</body>
</html>


if ($data[0] > 1) translates to 'if the first row from result array is greater than 1', instead of checking if the first row is greater than 1, check if the query returns more than 0 rows.
<?php
$checkseat = "SELECT * FROM reservations WHERE seat = '$_GET[seat]'";
$rs = mysqli_query($connection,$checkseat);
// get the row count of the result
$row_count = mysqli_num_rows($rs);
$data = mysqli_fetch_row($rs);
if ($row_count > 0) {
echo 'Seat is already reserved<br/>';
}
?>
As for any other issues with your code you will need to provide more specific questions. If you're not sure what parts aren't working I suggest enabling error reporting and looking at the browsers console for any error messages.
<?php
// this goes at the top of the php page
ini_set('display_errors', 1);
ini_set('display_startup_errors', 1);
error_reporting(E_ALL);
?>

Related

Check, unckeck checkbox in each row of table based on Checkbox ID using Jquery

I am trying to check, Uncheck checkbox based on id.
I have two column in table.
*current paper * arrear paper
if one paper is selected in current that paper should be disabled from arrear paper
and if is selected in arrear column that particular paper should be disabled from current paper.
My Problem is that i am able to disable the Arrear Paper if that specific paper is selected in current column, but if i uncheck that selected paper in current column, it does not enable that paper in arrear column.
This same problem is in SelectAll Checkbox function also
if i click SelectAll in P1 paper,Current Column i want to disable that column in P1 Arrear Paper Column
Can Anyone Please Guide Me to Overcome this issue.
Thanks in Advance
MY FIDDLE : Demo Here
Snippet :
$('input[type="checkbox"]').change(function() {
$('input:checkbox:checked').each(function() {
var el = $(this).parents('tr')[0];
if ($(this).is(":checked")) {
var dis = 'A-' + $(this).attr("id");
var value = $(this).closest('tr').find('#' + dis);
value.prop('disabled', true);
}
})
});
$('input[type="checkbox"]').change(function() {
$('input:checkbox:checked').each(function() {
// var el = $(this).parents('tr')[0];
if ($(this).is(":not(:checked)")) {
var dis = 'A-' + $(this).attr("id");
var value = $(this).closest('tr').find('#' + dis);
value.prop('disabled', false);
}
})
});
function SelectAll(obj) {
// find the index of column
var table = $(obj).closest('table');
var th_s = table.find('th');
var current_th = $(obj).closest('th');
var columnIndex = th_s.index(current_th) - 1;
console.log('The Column is = ' + columnIndex);
// select all checkboxes from the same column index
table.find('td:nth-child(' + (columnIndex) + ') input').prop("checked", obj.checked).change();
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table style="width:100%;" id="mytable" border="1">
<tr>
<th style="padding:2.5px;" colspan="3" style="text-align:center;">Current Paper</th>
<th style="padding:2.5px;" colspan="3">Arrear Paper</th>
</tr>
<tr>
<th>P1<br/> <input type="checkbox" id="selectAll" onclick="SelectAll(this)" /></th>
<th>P2 <br/><input type="checkbox" id="selectAll" onclick="SelectAll(this)" /></th>
<th>P3 <br/><input type="checkbox" id="selectAll" onclick="SelectAll(this)" /></th>
<th>P1<br/> <input type="checkbox" id="selectAll" onclick="SelectAll(this)" /></th>
<th>P2 <br/><input type="checkbox" id="selectAll" onclick="SelectAll(this)" /></th>
<th>P3<br/> <input type="checkbox" id="selectAll" onclick="SelectAll(this)" /></th>
</tr>
<tr>
<td><input type="checkbox" name="checkbox" id="P1" class="sum" value="550" data-exval="1" data-toggle="checkbox"></td>
<td><input type="checkbox" name="checkbox" id="P2" class="sum" data-exval="1" data-toggle="checkbox"></td>
<td><input type="checkbox" name="checkbox" id="P3" class="sum" data-exval="1" data-toggle="checkbox"></td>
<td><input class="selectableType" type="checkbox" id=A-P1></td>
<td><input class="selectableType" type="checkbox" id=A-P2></td>
<td><input class="selectableType" type="checkbox" id=A-P3></td>
</tr>
<tr>
<td><input type="checkbox" name="checkbox" id="P1" class="sum" value="550" data-exval="1" data-toggle="checkbox"></td>
<td><input type="checkbox" name="checkbox" id="P2" class="sum" data-exval="1" data-toggle="checkbox"></td>
<td><input type="checkbox" name="checkbox" id="P3" class="sum" data-exval="1" data-toggle="checkbox"></td>
<td><input class="selectableType" type="checkbox" id=A-P1></td>
<td><input class="selectableType" type="checkbox" id=A-P2></td>
<td><input class="selectableType" type="checkbox" id=A-P3></td>
</tr>
</table>
Basic Requirement : if a student select one particular paper in Current column that Specific Paper must be disabled from arrear column,
in a row there will be two same papers,only one shoulb be selected at a time.

I have done a little modification in your html, i have put off the onclick action and instead to use id, i use the index of each checkbox,
so main checkbox are indexed from 0 to 5,
the first line of checkbox are indexed from 6 to 11,
and the last line from 12 to 17.
I set the different values in an array and i trap the index of checkbox clicked:
let sel = $('input[type="checkbox"]');
let ar = [];
for (let i = 0; i < 6; i++) {
//if you want to add new line of checkbox ar.push([i + 6, i + 12, i + 18]);
ar.push([i + 6, i + 12]);
}
//[[6, 12], [7, 13], [8, 14], [9, 15], [10, 16], [11, 17]]
// index for checkbox 0 is 6,12 and so on
//console.log("checkbox", ar);
sel.change(function() {
let lastcheckbox = sel.index($(this));
let ischecked = sel.eq(lastcheckbox).is(":checked");
//sel.prop("disabled", false);
if (lastcheckbox < 6) { //main checkbox clicked
let alt = lastcheckbox < 3 ? lastcheckbox + 3 : lastcheckbox - 3;
ar[lastcheckbox].forEach( (item, i) => sel.eq(item).prop("checked", ischecked));
sel.eq(alt).prop("disabled", ischecked);
ar[alt].forEach( (item, i) => sel.eq(item).prop("disabled", ischecked));
return;
}
//so its a secondary checkbox clicked
ar.forEach((item, idx) => {
if (item.includes(lastcheckbox)) {//find the main index of secondary checkbox
let index = item.indexOf(lastcheckbox);
let alt = idx < 3 ? idx + 3 : idx - 3;
let one = item.some((idx) => sel.eq(idx).is(":checked"));
let both = item.every((idx) => sel.eq(idx).is(":checked"));
if (both) { //both secondary checkbox checked
sel.eq(idx).prop("checked", true);
sel.eq(alt).prop("disabled", true);
ar[alt].map((i) => sel.eq(i).prop("disabled", true));
} else if (!one && !both) { //no secondary checkbox checked
sel.eq(idx).prop("checked", false);
sel.eq(alt).prop("disabled", false);
ar[alt].map((i) => sel.eq(i).prop("disabled", false));
} else if (one && !both) {
sel.eq(idx).prop("checked", false);
sel.eq(alt).prop("disabled", true);
sel.eq(lastcheckbox).prop("checked", ischecked);
sel.eq(ar[alt][index]).prop("disabled", ischecked);
}
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<table style="width:100%;" id="mytable" border="1">
<tr>
<th style="padding:2.5px;" colspan="3" style="text-align:center;">Current Paper</th>
<th style="padding:2.5px;" colspan="3">Arrear Paper</th>
</tr>
<tr>
<th>P1<br /> <input type="checkbox" id="selectAll" /></th>
<th>P2 <br /><input type="checkbox" id="selectAll" /></th>
<th>P3 <br /><input type="checkbox" id="selectAll" /></th>
<th>P1<br /> <input type="checkbox" id="selectAll" /></th>
<th>P2 <br /><input type="checkbox" id="selectAll" /></th>
<th>P3<br /> <input type="checkbox" id="selectAll" /></th>
</tr>
<tr>
<td><input type="checkbox" name="checkbox" id="P1" class="sum" value="550" data-exval="1" data-toggle="checkbox"></td>
<td><input type="checkbox" name="checkbox" id="P2" class="sum" data-exval="1" data-toggle="checkbox"></td>
<td><input type="checkbox" name="checkbox" id="P3" class="sum" data-exval="1" data-toggle="checkbox"></td>
<td><input class="selectableType" type="checkbox" id=A-P1></td>
<td><input class="selectableType" type="checkbox" id=A-P2></td>
<td><input class="selectableType" type="checkbox" id=A-P3></td>
</tr>
<tr>
<td><input type="checkbox" name="checkbox" id="P1" class="sum" value="550" data-exval="1" data-toggle="checkbox"></td>
<td><input type="checkbox" name="checkbox" id="P2" class="sum" data-exval="1" data-toggle="checkbox"></td>
<td><input type="checkbox" name="checkbox" id="P3" class="sum" data-exval="1" data-toggle="checkbox"></td>
<td><input class="selectableType" type="checkbox" id=A-P1></td>
<td><input class="selectableType" type="checkbox" id=A-P2></td>
<td><input class="selectableType" type="checkbox" id=A-P3></td>
</tr>
</table>

You have lots of similar checkbox ids and as you have mentioned you didn't want to change them due to some reason, so the way we can do it by avoiding for loop on checkbox and calling function on checkbox change.
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<table style="width:100%;" id="mytable" border="1">
<tr>
<th style="padding:2.5px;" colspan="3" style="text-align:center;">Current Paper</th>
<th style="padding:2.5px;" colspan="3">Arrear Paper</th>
</tr>
<tr>
<th>P1<br/> <input type="checkbox" id="selectAll" onclick="SelectAll(this)" /></th>
<th>P2 <br/><input type="checkbox" id="selectAll" onclick="SelectAll(this)"/></th>
<th>P3 <br/><input type="checkbox" id="selectAll"onclick="SelectAll(this)" /></th>
<th>P1<br/> <input type="checkbox" id="selectAll" onclick="SelectAll(this)" /></th>
<th>P2 <br/><input type="checkbox" id="selectAll" onclick="SelectAll(this)"/></th>
<th>P3<br/> <input type="checkbox" id="selectAll"onclick="SelectAll(this)" /></th>
</tr>
<tr >
<td><input type="checkbox" name="checkbox" id="P1" class="sum" data-type="CurrentPaper" value="550" data-exval="1" data-toggle="checkbox" onclick="checkuncheck(this);"></td>
<td><input type="checkbox" name="checkbox" id="P2" class="sum"
data-exval="1" data-type="CurrentPaper" data-toggle="checkbox" onclick="checkuncheck(this);"></td>
<td><input type="checkbox" name="checkbox" id="P3" class="sum"
data-exval="1" data-type="CurrentPaper" data-toggle="checkbox" onclick="checkuncheck(this);"></td>
<td><input class="selectableType" type="checkbox" id="A-P1" onclick="checkuncheck(this);" data-type="ArrearPaper" ></td>
<td><input class="selectableType" type="checkbox" id="A-P2" onclick="checkuncheck(this);" data-type="ArrearPaper" ></td>
<td><input class="selectableType" type="checkbox" id="A-P3" onclick="checkuncheck(this);" data-type="ArrearPaper"></td>
</tr>
<tr >
<td><input type="checkbox" name="checkbox" id="P1" class="sum" value="550" data-type="CurrentPaper" data-exval="1" data-toggle="checkbox" onclick="checkuncheck(this);"></td>
<td><input type="checkbox" name="checkbox" id="P2" class="sum"
data-exval="1" data-type="CurrentPaper" data-toggle="checkbox" onclick="checkuncheck(this);"></td>
<td><input type="checkbox" name="checkbox" id="P3" class="sum"
data-exval="1" data-type="CurrentPaper" data-toggle="checkbox" onclick="checkuncheck(this);"></td>
<td><input class="selectableType" type="checkbox" id="A-P1" onclick="checkuncheck(this);" data-type="ArrearPaper" ></td>
<td><input class="selectableType" type="checkbox" id="A-P2" onclick="checkuncheck(this);" data-type="ArrearPaper" ></td>
<td><input class="selectableType" type="checkbox" id="A-P3" onclick="checkuncheck(this);" data-type="ArrearPaper" ></td>
</tr>
</table>
function checkuncheck(element){
var dis = $(element).attr("id");
if($(element).attr("data-type").toLowerCase()=="currentpaper"){
dis='A-'+$(element).attr("id");
}
else{
dis= dis.split("-")[1];
}
var el = $(element).parents('tr')[0];
if($(element).is(":checked")){
var value= $(element).closest('tr').find('#'+dis);
value.prop('disabled', true);
}
else
{
$(element).closest('tr').find('#'+dis)
.prop('disabled', false);
}
}
you can find the code in this fiddle:
https://jsfiddle.net/472s8cvb/
Based on the changes, try to implement select all functionlity

Having table <td> as checkbox, how to implement click and drag multiple selection on <td>

I do have a code which changes checkbox state when <td> is clicked
$(document).ready(function() {
$("td").click(function(e) {
var chk = $(this).closest("td").find("input:checkbox").get(0);
if (e.target != chk) {
chk.checked = !chk.checked;
if ($(this).closest("td").find("input:checkbox").prop("checked") == true) {
$(this).closest("td").css("background-color", "red");
console.log($(this).closest("td").find("input:checkbox").prop("checked"));
console.log($(this).closest("td").find("input:checkbox").prop("value"));
} else {
$(this).closest("td").css("background-color", "white");
console.log($(this).closest("label").find("input:checkbox").prop("checked"));
console.log($(this).closest("label").find("input:checkbox").prop("value"));
}
}
});
});
table,
th,
td {
border: 1px solid black;
}
input[type="checkbox"] {
/* display:none; */
}
td input:after {
background-color: red;
}
<div class="table">
<!-- <form method="POST"> -->
<table id='sample'>
<tr>
<th>Time\Date</th>
<th>Monday</th>
<th>Tuesday</th>
<th>Wednesday</th>
<th>Thursday</th>
<th>Friday</th>
<th>Saturday</th>
<th>Sunday</th>
</tr>
<tr>
<td>07:30-08:00</td>
<td><input name="checkbox" value="A1" type="checkbox">A1</td>
<td><input name="checkbox" value="B1" type="checkbox">B1</td>
<td><input name="checkbox" value="C1" type="checkbox">C1</td>
<td><input name="checkbox" value="D1" type="checkbox">D1</td>
<td><input name="checkbox" value="E1" type="checkbox">E1</td>
<td><input name="checkbox" value="F1" type="checkbox">F1</td>
<td><input name="checkbox" value="G1" type="checkbox">G1</td>
</tr>
<tr>
<td>08:00-08:30</td>
<td><input name="checkbox" value="A2" type="checkbox">A2</td>
<td><input name="checkbox" value="B2" type="checkbox">B2</td>
<td><input name="checkbox" value="C2" type="checkbox">C2</td>
<td><input name="checkbox" value="D2" type="checkbox">D2</td>
<td><input name="checkbox" value="E2" type="checkbox">E2</td>
<td><input name="checkbox" value="F2" type="checkbox">F2</td>
<td><input name="checkbox" value="G2" type="checkbox">G2</td>
</tr>
<tr>
<td>08:30-09:00</td>
<td><input name="checkbox" value="A3" type="checkbox">A3</td>
<td><input name="checkbox" value="B3" type="checkbox">B3</td>
<td><input name="checkbox" value="C3" type="checkbox">C3</td>
<td><input name="checkbox" value="D3" type="checkbox">D3</td>
<td><input name="checkbox" value="E3" type="checkbox">E3</td>
<td><input name="checkbox" value="F3" type="checkbox">F3</td>
<td><input name="checkbox" value="G3" type="checkbox">G3</td>
</tr>
</table>
<!-- </form> -->
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
I need to implement click and drag across multiple <td> which will also check the checkboxes. I do saw this implementation, but I'm still can't get to have this work with my existing code.

your reference is very helpfull, Hopefully my snippet can help you in any ways.. have a nice day :)
$(document).ready(function() {
var isMouseDown = false,
isHighlighted;
$("#sample input:checkbox").click(function() {
return false;
})
$("#sample td:not(:first-child)")
.mousedown(function() {
isMouseDown = true;
$(this).toggleClass("highlighted");
isHighlighted = $(this).hasClass("highlighted");
$(this).find("input:checkbox").prop("checked", isHighlighted);
return false; // prevent text selection
})
.mouseover(function() {
if (isMouseDown) {
$(this).toggleClass("highlighted", isHighlighted);
$(this).find("input:checkbox").prop("checked", isHighlighted);
}
})
.bind("selectstart", function() {
return false;
})
$(document)
.mouseup(function() {
isMouseDown = false;
});
});
table,
th,
td {
border: 1px solid black;
}
https: //stackoverflow.com/questions/58418830/having-table-td-as-checkbox-how-to-implement-click-and-drag-multiple-selectio#
input[type="checkbox"] {
/* display:none; */
}
td input:after {
background-color: red;
}
table td.highlighted {
background-color: #999;
}
<div class="table">
<!-- <form method="POST"> -->
<table id='sample'>
<tr>
<th>Time\Date</th>
<th>Monday</th>
<th>Tuesday</th>
<th>Wednesday</th>
<th>Thursday</th>
<th>Friday</th>
<th>Saturday</th>
<th>Sunday</th>
</tr>
<tr>
<td>07:30-08:00</td>
<td><input name="checkbox" value="A1" type="checkbox">A1</td>
<td><input name="checkbox" value="B1" type="checkbox">B1</td>
<td><input name="checkbox" value="C1" type="checkbox">C1</td>
<td><input name="checkbox" value="D1" type="checkbox">D1</td>
<td><input name="checkbox" value="E1" type="checkbox">E1</td>
<td><input name="checkbox" value="F1" type="checkbox">F1</td>
<td><input name="checkbox" value="G1" type="checkbox">G1</td>
</tr>
<tr>
<td>08:00-08:30</td>
<td><input name="checkbox" value="A2" type="checkbox">A2</td>
<td><input name="checkbox" value="B2" type="checkbox">B2</td>
<td><input name="checkbox" value="C2" type="checkbox">C2</td>
<td><input name="checkbox" value="D2" type="checkbox">D2</td>
<td><input name="checkbox" value="E2" type="checkbox">E2</td>
<td><input name="checkbox" value="F2" type="checkbox">F2</td>
<td><input name="checkbox" value="G2" type="checkbox">G2</td>
</tr>
<tr>
<td>08:30-09:00</td>
<td><input name="checkbox" value="A3" type="checkbox">A3</td>
<td><input name="checkbox" value="B3" type="checkbox">B3</td>
<td><input name="checkbox" value="C3" type="checkbox">C3</td>
<td><input name="checkbox" value="D3" type="checkbox">D3</td>
<td><input name="checkbox" value="E3" type="checkbox">E3</td>
<td><input name="checkbox" value="F3" type="checkbox">F3</td>
<td><input name="checkbox" value="G3" type="checkbox">G3</td>
</tr>
</table>
<!-- </form> -->
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

When you press mousedown we toggle a boolean to indicate that the mouse is down on. On mouseover a TD we check if the mouse is down and then check it. We prevent default behavior on mousedown to avoid text selection.
$(document).ready(function() {
// one click
$('td').on( 'click', function(){
var $checkbox = $(this).find('input:checkbox')
$checkbox.click()
if ( $checkbox[0].checked ) {
$checkbox.parent().css("background-color", "red");
} else {
$checkbox.parent().css("background-color", "white");
}
})
var mouseDown = false;
$('td').on('mousedown touchstart', function(event) {
// Disable text selection
event.preventDefault();
// set boolean
mouseDown = true;
});
$(window.document).on('mouseup touchend', function(event) {
mouseDown = false;
});
$('td').on('mouseover', function(event) {
if (mouseDown) {
var $checkbox = $(this).find('input:checkbox')
if ( !$checkbox[0].checked ) {
$checkbox.click()
}
}
});
});
table,
th,
td {
border: 1px solid black;
}
input[type="checkbox"] {
/* display:none; */
}
td input:after {
background-color: red;
}
<div class="table">
<!-- <form method="POST"> -->
<table id='sample'>
<tr>
<th>Time\Date</th>
<th>Monday</th>
<th>Tuesday</th>
<th>Wednesday</th>
<th>Thursday</th>
<th>Friday</th>
<th>Saturday</th>
<th>Sunday</th>
</tr>
<tr>
<td>07:30-08:00</td>
<td><input name="checkbox" value="A1" type="checkbox">A1</td>
<td><input name="checkbox" value="B1" type="checkbox">B1</td>
<td><input name="checkbox" value="C1" type="checkbox">C1</td>
<td><input name="checkbox" value="D1" type="checkbox">D1</td>
<td><input name="checkbox" value="E1" type="checkbox">E1</td>
<td><input name="checkbox" value="F1" type="checkbox">F1</td>
<td><input name="checkbox" value="G1" type="checkbox">G1</td>
</tr>
<tr>
<td>08:00-08:30</td>
<td><input name="checkbox" value="A2" type="checkbox">A2</td>
<td><input name="checkbox" value="B2" type="checkbox">B2</td>
<td><input name="checkbox" value="C2" type="checkbox">C2</td>
<td><input name="checkbox" value="D2" type="checkbox">D2</td>
<td><input name="checkbox" value="E2" type="checkbox">E2</td>
<td><input name="checkbox" value="F2" type="checkbox">F2</td>
<td><input name="checkbox" value="G2" type="checkbox">G2</td>
</tr>
<tr>
<td>08:30-09:00</td>
<td><input name="checkbox" value="A3" type="checkbox">A3</td>
<td><input name="checkbox" value="B3" type="checkbox">B3</td>
<td><input name="checkbox" value="C3" type="checkbox">C3</td>
<td><input name="checkbox" value="D3" type="checkbox">D3</td>
<td><input name="checkbox" value="E3" type="checkbox">E3</td>
<td><input name="checkbox" value="F3" type="checkbox">F3</td>
<td><input name="checkbox" value="G3" type="checkbox">G3</td>
</tr>
</table>
<!-- </form> -->
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Passing value to another jsp from dynamic table using javascript

Am working on project where i need to display dynamic table using database. Am able to display table but while passing values to another page for editing table am getting problem. Am able to pass only first row of the table. Am using javascript for passing value. Please help me. This is what I have tried till now
<table id='tbl2' border="2">
<thead>
<tr style="font-weight: bold;"><td colspan="7" align="center" >Team Shift Roster</td></tr>
<tr style="font-weight: bold;"><td>Date/Shift</td> <td>06:00AM - 02:00PM</td> <td>02:00PM - 10:00PM</td> <td>10:00PM - 06:00AM</td> <td width="130px">Weekly Off</td> <td width="130px">General Shift</td> <td></td></tr>
</thead>
<tbody>
<%
if(rs != null){
while(rs.next()){
%>
<tr>
<td style="font-weight: bold;" >
<input style="border:0px; width:100px" name="dd" id="dd" value="<%=rs.getString(1)%>" readonly /></td>
<td><input style="border:0px; width:130px" type="text" value="<%=rs.getString(2)%>" name="one" id="one"/></td>
<td><input style="border:0px; width:130px" type="text" value="<%=rs.getString(3)%>" name="two" id="two"/></td>
<td><input style="border:0px; width:130px" type="text" value="<%=rs.getString(4)%>" name="thr" id="thr"/></td>
<td><input style="border:0px; width:90px" type="text" value="<%=rs.getString(5)%>" name="fr" id="fr"/></td>
<td><input style="border:0px; width:100px" type="text" value="<%=rs.getString(6)%>" name="fve" id="fve"/></td>
<td><input style="border:0px; width:90px" type="button" onclick="myFun()" value="Update"></td>
</tr>
<% } }
else { out.println("No Record Found"); } %>
</tbody>
</table>
This is my Jscript function
<script>
function myFun(){
var v1 = document.getElementById("one").value;
var v2 = document.getElementById("two").value;
var v3 = document.getElementById("thr").value;
var v4 = document.getElementById("fr").value;
var v5 = document.getElementById("fve").value;
var dd = document.getElementById("dd").value;
window.location.href='DCM_UsrShiftUpdt.jsp?v1='+v1+'&v2='+v2+'&v3='+v3+'&v4='+v4+'&v5='+v5+'&dd='+dd;
}
</script>
Kindly response. Thanks in advance.

Problem with your code is duplicate ids, use dynamic ids, lets take row id:
if(rs != null){
int rowId = 1;
while(rs.next()){ %>
<tr>
<td style="font-weight: bold;"><input style="border:0px; width:100px" name="dd" id="dd<%=rowId%>" value="<%=rs.getString(1)%>" readonly /></td>
<td><input style="border:0px; width:130px" type="text" value="<%=rs.getString(2)%>" name="one" id="one<%=rowId%>"/></td>
.... so on for other <td>
<td><input style="border:0px; width:90px" type="button" onclick="myFun(<%=rowId%>)" value="Update"></td>
</tr>
<%
rowId++;
}
}
JS
function myFun(rowId){
var v1 = document.getElementById("one"+rowId).value;
//so on for the rest
}
P.S. avoid using JSP scriptlets and use JSTL instead.

IDs need to be UNIQUE. Use parentNode's siblings to gather the input values for the row the button is in
var buts = document.querySelectorAll("[value=Update]");
for (var i=0;i<buts.length;i++) {
buts[i].onclick=function() {
var cells = this.parentNode.parentNode.cells, parms = [];
for (var i=0;i<cells.length-1;i++) { // stop at the button
var input = cells[i].querySelector("input");
parms.push(input.name+"="+input.value)
}
console.log(parms.join("&"));
}
}
<table id='tbl2' border="2">
<thead>
<tr style="font-weight: bold;"><td colspan="7" align="center" >Team Shift Roster</td></tr>
<tr style="font-weight: bold;"><td>Date/Shift</td> <td>06:00AM - 02:00PM</td> <td>02:00PM - 10:00PM</td> <td>10:00PM - 06:00AM</td> <td width="130px">Weekly Off</td> <td width="130px">General Shift</td> <td></td></tr>
</thead>
<tbody>
<tr>
<td style="font-weight: bold;" >
<input style="border:0px; width:100px" name="dd" value="1" readonly /></td>
<td><input style="border:0px; width:130px" type="text" value="1" name="one"/></td>
<td><input style="border:0px; width:130px" type="text" value="2" name="two" /></td>
<td><input style="border:0px; width:130px" type="text" value="3" name="thr" /></td>
<td><input style="border:0px; width:90px" type="text" value="4" name="fr" /></td>
<td><input style="border:0px; width:100px" type="text" value="5" name="fve" /></td>
<td><input style="border:0px; width:90px" type="button" value="Update"></td>
</tr>
<tr>
<td style="font-weight: bold;" >
<input style="border:0px; width:100px" name="dd" value="1" readonly /></td>
<td><input style="border:0px; width:130px" type="text" value="1" name="one"/></td>
<td><input style="border:0px; width:130px" type="text" value="2" name="two" /></td>
<td><input style="border:0px; width:130px" type="text" value="3" name="thr" /></td>
<td><input style="border:0px; width:90px" type="text" value="4" name="fr" /></td>
<td><input style="border:0px; width:100px" type="text" value="5" name="fve" /></td>
<td><input style="border:0px; width:90px" type="button" value="Update"></td>
</tr>
<tr>
<td style="font-weight: bold;" >
<input style="border:0px; width:100px" name="dd" value="1" readonly /></td>
<td><input style="border:0px; width:130px" type="text" value="1" name="one"/></td>
<td><input style="border:0px; width:130px" type="text" value="2" name="two" /></td>
<td><input style="border:0px; width:130px" type="text" value="3" name="thr" /></td>
<td><input style="border:0px; width:90px" type="text" value="4" name="fr" /></td>
<td><input style="border:0px; width:100px" type="text" value="5" name="fve" /></td>
<td><input style="border:0px; width:90px" type="button" value="Update"></td>
</tr>
</tbody>
</table>

Show/hide rest of the rows when checkbox is checked

I have a table which has a checkbox in the first column (in a <td> element) of every row. When this is checked, the rest of the columns in that row will be displayed.
I have read several articles on this topic with some great examples but can't achieve exactly what I want. I had been able to hide the rest of the <td> elements using css but not been able to make it visible.
I understand this is possible with JavaScript but I am not well versed in it. Any help is highly appreciated.
table {
width: 300px;
}
table td {
min-width: 150px;
border: 1px solid;
text-align: center;
padding: 5px;
}
table td lable {
margin-right: 10px;
}
.L3,
.L4,
.L5 {
visibility: hidden
}
<form method="post" action="#">
<table>
<tr>
<th>Year</th>
<th>Thank You Letter</th>
<th>Pennant</th>
<th>Trophy</th>
<th>Medal</th>
<th>Book Voucher</th>
</tr>
<tr>
<td>
<lable>Level 3</lable><input type="checkbox" name="level3" value="3" /></td>
<td class="L3"><input type="checkbox" name="tu3" value="1" /></td>
<td class="L3"><input type="checkbox" name="pen3" value="1" /></td>
<td class="L3"><input type="checkbox" name="trp3" value="1" /></td>
<td class="L3"><input type="checkbox" name="med3" value="1" /></td>
<td class="L3"><input type="checkbox" name="bkv3" value="1" /></td>
</tr>
<tr>
<td>
<lable>Level 4</lable><input type="checkbox" name="level4" value="4" /></td>
<td><input type="checkbox" name="tu4" value="1" /></td>
<td><input type="checkbox" name="pen4" value="1" /></td>
<td><input type="checkbox" name="trp4" value="1" /></td>
<td><input type="checkbox" name="med4" value="1" /></td>
<td><input type="checkbox" name="bkv4" value="1" /></td>
</tr>
<tr>
<td>
<lable>Level 5</lable><input type="checkbox" name="level5" value="5" /></td>
<td><input type="checkbox" name="tu5" value="1" /></td>
<td><input type="checkbox" name="pen5" value="1" /></td>
<td><input type="checkbox" name="trp5" value="1" /></td>
<td><input type="checkbox" name="med5" value="1" /></td>
<td><input type="checkbox" name="bkv5" value="1" /></td>
</tr>
</table>
</form>

Using jQuery:
$(document).ready(function() {
$("tr td:first-child :checkbox").change(function() {
var checkboxes = $(this).parent().siblings("td").children(":checkbox");
var containers = $(this).parent().siblings("td:not(first-child)");
if (this.checked) {
containers.css('visibility', 'visible');
checkboxes.prop("checked", true);
} else {
containers.css('visibility', 'hidden');
checkboxes.prop("checked", false);
}
});
});
table {
width: 300px;
}
table td {
min-width: 150px;
border: 1px solid;
text-align: center;
padding: 5px;
}
table td lable {
margin-right: 10px;
}
.L3,
.L4,
.L5 {
visibility: hidden
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form method="post" action="#">
<table>
<tr>
<th>Year</th>
<th>Thank You Letter</th>
<th>Pennant</th>
<th>Trophy</th>
<th>Medal</th>
<th>Book Voucher</th>
</tr>
<tr>
<td>
<lable>Level 3</lable><input type="checkbox" name="level3" value="3" /></td>
<td class="L3"><input type="checkbox" name="tu3" value="1" /></td>
<td class="L3"><input type="checkbox" name="pen3" value="1" /></td>
<td class="L3"><input type="checkbox" name="trp3" value="1" /></td>
<td class="L3"><input type="checkbox" name="med3" value="1" /></td>
<td class="L3"><input type="checkbox" name="bkv3" value="1" /></td>
</tr>
<tr>
<td>
<lable>Level 4</lable><input type="checkbox" name="level4" value="4" /></td>
<td><input type="checkbox" name="tu4" value="1" /></td>
<td><input type="checkbox" name="pen4" value="1" /></td>
<td><input type="checkbox" name="trp4" value="1" /></td>
<td><input type="checkbox" name="med4" value="1" /></td>
<td><input type="checkbox" name="bkv4" value="1" /></td>
</tr>
<tr>
<td>
<lable>Level 5</lable><input type="checkbox" name="level5" value="5" /></td>
<td><input type="checkbox" name="tu5" value="1" /></td>
<td><input type="checkbox" name="pen5" value="1" /></td>
<td><input type="checkbox" name="trp5" value="1" /></td>
<td><input type="checkbox" name="med5" value="1" /></td>
<td><input type="checkbox" name="bkv5" value="1" /></td>
</tr>
</table>
</form>
Using only JS:
var primaryCheckboxes = document.querySelectorAll("tr td:first-child input[type=checkbox]");
Array.from(primaryCheckboxes).forEach(checkbox => {
checkbox.addEventListener("click", function(event) {
var secondaryCheckboxes = this.parentElement.parentElement.querySelectorAll("input[type=checkbox]");
var checkedSatus = false,
visibilityStatus = "hidden";
if (this.checked) {
checkedSatus = true;
visibilityStatus = "visible";
}
Array.from(secondaryCheckboxes).forEach(checkbox => {
if (checkbox !== this) {
checkbox.checked = checkedSatus;
checkbox.parentElement.style.visibility = visibilityStatus;
}
});
});
});
table {
width: 300px;
}
table td {
min-width: 150px;
border: 1px solid;
text-align: center;
padding: 5px;
}
table td lable {
margin-right: 10px;
}
.L3,
.L4,
.L5 {
visibility: hidden
}
<form method="post" action="#">
<table>
<tr>
<th>Year</th>
<th>Thank You Letter</th>
<th>Pennant</th>
<th>Trophy</th>
<th>Medal</th>
<th>Book Voucher</th>
</tr>
<tr>
<td>
<lable>Level 3</lable>
<input type="checkbox" name="level3" value="3" />
</td>
<td class="L3"><input type="checkbox" name="tu3" value="1" /></td>
<td class="L3"><input type="checkbox" name="pen3" value="1" /></td>
<td class="L3"><input type="checkbox" name="trp3" value="1" /></td>
<td class="L3"><input type="checkbox" name="med3" value="1" /></td>
<td class="L3"><input type="checkbox" name="bkv3" value="1" /></td>
</tr>
<tr>
<td>
<lable>Level 4</lable>
<input type="checkbox" name="level4" value="4" />
</td>
<td><input type="checkbox" name="tu4" value="1" /></td>
<td><input type="checkbox" name="pen4" value="1" /></td>
<td><input type="checkbox" name="trp4" value="1" /></td>
<td><input type="checkbox" name="med4" value="1" /></td>
<td><input type="checkbox" name="bkv4" value="1" /></td>
</tr>
<tr>
<td>
<lable>Level 5</lable><input type="checkbox" name="level5" value="5" /></td>
<td><input type="checkbox" name="tu5" value="1" /></td>
<td><input type="checkbox" name="pen5" value="1" /></td>
<td><input type="checkbox" name="trp5" value="1" /></td>
<td><input type="checkbox" name="med5" value="1" /></td>
<td><input type="checkbox" name="bkv5" value="1" /></td>
</tr>
</table>
</form>

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>

Categories

Resources