I'm trying to find "checkbox" inside the parent element table. Below, my HTML code has a checkbox input with an ID of "selectall". Using jQuery, when "selectall" is changed, I want to, skip back to the parent element table and find the first mention of "checkbox" as follows:
HTML:
<table border="1" cellpadding="5">
<tr>
<th>#</th>
<th>ID</th>
<th>Datetime</th>
<th>Reading</th>
<th>Status</th>
<th>Gate</th>
</tr>
<?php
// while loop, fetch the SQL result as an array
while ($row = mysqli_fetch_array($sql)) {
// echo the database data
echo '<tr><td><input name="checkbox[]" type="checkbox" class="check-class" value="' . $row['ID'] . '"></td>';
echo "<td>" . $row['ID'] . "</td><td>" . $row['datetime'] . "</td><td>" . $row['reading'] . "</td><td>" . $row['status'] . "</td><td>" . $row['gate'] . "</td></tr>";
}
// have a check all button and delete input -->
?>
<tr valign="middle">
<td>
<input type="checkbox" id="selectall"/>Check All
</td>
<td align="center" colspan="5">
<input name="delete" type="submit" id="delete" value="Delete">
</td>
</tr>
</table>
Javascript:
$(function() {
// declare select all checkbox
$('#selectall').change(function() {
// declare other checkboxes
var checkboxes = $(this).closest('table').find(':checkbox');
// if checked, set to all true
if ($(this).prop('checked')) {
checkboxes.prop('checked', true);
}
// else, set all to false
else {
checkboxes.prop('checked', false);
}
});});
The purpose is that, for every row in my sql query, I return the fields to the HTML table, each with a checkbox. My table is coded so that for every record, a checkbox appears on the same table row, thus allowing me to select that checkbox (or multiple of) in a different SQL statement later to DELETE such record(s) from the SQL table.
Thus, using javascript, I'm trying to use a separate checkbox that, once checked, checks all the other checkboxes. If that makes sense.
I had a working example before, but it was a mess. I wrapped everything within php tags and echoed all the necessary HTML tags (obviously a bad idea), hence the change now. But it did work before:
Before:
echo '<form name="form1" method="POST" action="">';
echo '<table border="1" cellspacing="0" cellpadding="5">';
echo "<tr><th>#</th><th>ID</th><th>datetime</th><th>reading</th><th>status</th><th>gate</th></tr>";
// while loop, fetch the SQL result as an array
while ($row = mysqli_fetch_array($sql)) {
// echo the database data
echo '<tr><td><input name="checkbox[]" type="checkbox" class="check-class" value="' . $row['ID'] . '"></td>';
echo "<td>" . $row['ID'] . "</td><td>" . $row['datetime'] . "</td><td>" . $row['reading'] . "</td><td>" . $row['status'] . "</td><td>" . $row['gate'] . "</td></tr>";
}
// have a check all button and delete input
echo '<tr valign="middle"><td><input type="checkbox" id="selectall"/>Check All</td><td align="center" colspan="5"><input name="delete" type="submit" id="delete" value="Delete"></td></tr>';
echo "</table>";
Javascript:
$(function() {
// declare select all checkbox
$('#selectall').change(function() {
// declare other checkboxes
var checkboxes = $(this).closest('form').find(':checkbox');
// if checked, set to all true
if ($(this).prop('checked')) {
checkboxes.prop('checked', true);
}
// else, set all to false
else {
checkboxes.prop('checked', false);
}
});});
Please advise.
EDIT (Converted HTML paste):
<!DOCTYPE html>
<html>
<head>
<title>Flood Sensor Web Interface</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>
<script type="text/javascript" src="js/checkall.js"></script>
<script type="text/javascript" src="js/buttoncontrol.js">
</script>
<script type="text/javascript" src="js/paginate.js"></script>
</head>
<body>
<h1>Flood Sensor Web Interface</h1>
<p>This web interface will display all the table data. To
delete, check the relevant checkbox (or multiple checkboxes)
and press the delete button.</p>
<table border="1" cellpadding="5">
<tr>
<th>#</th>
<th>ID</th>
<th>Datetime</th>
<th>Reading</th>
<th>Status</th>
<th>Gate</th>
</tr>
<tr>
<td>
<input name="checkbox[]" type="checkbox"
class="check-class" value="2">
<td>2</td>
<td>2014-12-03_18:24:52</td>
<td>0</td>
<td>Safe</td>
<td>Open</td>
<tr>
<td>
<input name="checkbox[]" type="checkbox"
class="check-class" value="3">
<td>3</td>
<td>2014-12-03_18:24:55</td>
<td>13443</td>
<td>Safe</td>
<td>Open</td>
<tr>
<td>
<input name="checkbox[]" type="checkbox"
class="check-class" value="4">
<td>4</td>
<td>2014-12-03_18:24:58</td>
<td>35656</td>
<td>Caution</td>
<td>Open</td>
<tr>
<td>
<input name="checkbox[]"
type="checkbox" class="check-class"
value="6">
<td>6</td>
<td>2014-12-03_18:25:04</td>
<td>57085</td>
<td>Danger</td>
<td>Closed</td>
<tr>
<td>
<input name="checkbox[]"
type="checkbox"
class="check-class" value="7">
<td>7</td>
<td>2014-12-03_18:25:07</td>
<td>28823</td>
<td>Caution</td>
<td>Open</td>
<tr>
<td>
<input name="checkbox[]"
type="checkbox"
class="check-class"
value="8">
<td>8</td>
<td>
2014-12-03_18:25:10</td>
<td>65535</td>
<td>Danger</td>
<td>Closed</td>
<!-- have a check all button and delete input -->
<tr valign="middle">
<td>
<input type="checkbox"
id="selectall" />Check
All</td>
<td align="center"
colspan="5">
<input name="delete"
type="submit"
id="delete"
value="Delete">
<a href="https://agent.electricimp.com/ABCDEFG?report=0">
Disable Database
Reporting</a>
<br />
<a href="https://agent.electricimp.com/ABCDEFG?report=1">
Enable Database
Reporting</a>
<br />
<a href="https://agent.electricimp.com/ABCDEFG?gate=0">
Override OFF
Barrier</a>
<br />
<a href="https://agent.electricimp.com/ABCDEFG?gate=1">
Override ON
Barrier</a>
<br />
<a href="https://agent.electricimp.com/ABCDEFG?lamp=0">
Override OFF
Lamp</a>
<br />
<a href="https://agent.electricimp.com/ABCDEFG?lamp=1">
Override ON
Lamp</a>
</input>
</td>
</tr>
</input>
</td>
</tr>
</input>
</td>
</tr>
</input>
</td>
</tr>
</input>
</td>
</tr>
</input>
</td>
</tr>
</input>
</td>
</tr>
</table>
</body>
</html>
