我试图在父元素表内找到"复选框"。下面,我的 HTML 代码有一个 ID 为"selectall"的复选框输入。使用jQuery,当"selectall"被更改时,我想跳回父元素表并找到第一次提到的"复选框",如下所示:
.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);
}
});});
目的是,对于 sql 查询中的每一行,我都将字段返回到 HTML 表中,每个字段都有一个复选框。我的表被编码为对于每条记录,在同一表行上出现一个复选框,从而允许我稍后在不同的 SQL 语句中选择该复选框(或多个复选框(以从 SQL 表中删除此类记录。
因此,使用javascript,我尝试使用一个单独的复选框,一旦选中,就会选中所有其他复选框。如果这是有道理的。
我以前有一个工作示例,但它是一团糟。我将所有内容包装在 php 标签中并回显了所有必要的 HTML 标签(显然是一个坏主意(,因此现在进行了更改。但它之前确实有效:
以前:
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);
}
});});
请指教。
编辑(转换后的 HTML 粘贴(:
<!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>
演示代码中的主要问题是使用parent()
但复选框的父级是td
而不是table
,因此您没有达到足够远的 DOM。
我建议改用closest()
(如有问题的代码所示(
试试这个:
$(function () {
$('#selectall').change(function () {
$(this).closest('table').find(':checkbox').prop('checked',this.checked);
});
});
请参阅以下 API 文档:
父((
最接近((
演示
这会更容易完成您想要的事情。
$(document).ready(function(){
$("#selectall").on("change", function() {
$.event.trigger("mycheck", {checked: $(this).prop("checked")});
});
$(".check-class").on("mycheck", function(e, data) {
$(this).prop("checked", data.checked);
});
});
在这里使用 jsfiddle:http://jsfiddle.net/revxaisks/vw6oc4x6/2/
@Chris卡维内斯解决了这个问题。首先,检查修改后的javascript代码。
其次,就像我在上面的帖子中提到的,使用较旧的 1.8.3 脚本文件,然后只使用标准
$(document).ready(function(){
为了包装脚本。将其另存为 SCRIPTNAME.js然后在库声明后的 HTML 中声明它(重要!
我的问题是我使用的是较新的 1.9.1 jQuery 库,它以不同的方式处理数据。希望这有帮助。