jQuery，如何在HTML中正确查找父元素的元素类型
jQuery, how to correctly find element type of a parent element in HTML
我试图在父元素表内找到"复选框"。下面，我的 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 库，它以不同的方式处理数据。希望这有帮助。
相关文章：
- 如何使用jquery迭代具有相同属性的html元素并查找onclick事件
- 如何在不传递此信息的情况下查找被调用的元素
- 查找元素高度，包括边距
- 为什么可以't PHP查找可以使用JS或jQuery访问的元素
- 查找数组javascript中包含的元素类型
- 在AngularJs中查找元素并更改其内容
- JavaScript-如何按类查找元素并删除此类
- 在Meteor中如何查找DOM元素(渲染后）
- jquery在元素中查找文本节点，并使用标记进行连接和包装
- 如何按id查找两个类中任一类的子元素
- 从json数组中查找满足条件的特定元素的值
- 如何通过来自不同父元素的相同元素查找 HTML 元素
- 为动态创建的元素查找前一个同级的值
- HTML5 音频元素 - 查找滑块 - 无法在“HTMLMediaElement”上设置“当前时间”属性:提供的双精度值
- 具有用户添加的行的窗体，以及对每行的输入元素查找
- 选择tr及其“所有子元素”;-查找jquery选择器
- 为每个元素查找data(）键值对
- 如何根据兄弟元素中排序的元素查找索引
- 为多类元素中某一类的元素查找Dom节点索引
- 如何使用多行元素查找offsetWidth
