Javascript jQuery，如何在HTML中正确查找父元素的元素类型_Javascript_Php_Jquery_Html_Sql

Javascript jQuery，如何在HTML中正确查找父元素的元素类型

javascript php jquery html sql

Javascript jQuery，如何在HTML中正确查找父元素的元素类型,javascript,php,jquery,html,sql,Javascript,Php,Jquery,Html,Sql,我试图在父元素表中找到“复选框”。下面，我的HTML代码有一个ID为“selectall”的复选框输入。使用jQuery，当“selectall”被更改时，我想跳回到父元素表，找到第一个提到的“checkbox”，如下所示： HTML: <table border="1" cellpadding="5"> <tr> <th>#</th> <th>ID</th> <

我试图在父元素表中找到“复选框”。下面，我的HTML代码有一个ID为“selectall”的复选框输入。使用jQuery，当“selectall”被更改时，我想跳回到父元素表，找到第一个提到的“checkbox”，如下所示：

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>

$(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);
    }
});});

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>";

$(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);
    }
});});

<!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>

其目的是，对于sql查询中的每一行，我将字段返回到HTML表，每个字段都带有一个复选框。我的表是经过编码的，因此对于每个记录，同一表行上都会出现一个复选框，这样我就可以在以后的不同SQL语句中选择该复选框（或多个），以便从SQL表中删除这些记录

因此，使用javascript，我尝试使用一个单独的复选框，一旦选中，它将选中所有其他复选框。如果这有道理的话

我以前有一个工作的例子，但它是一个烂摊子。我将所有内容包装在php标记中，并响应所有必要的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>

$(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);
    }
});});

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>";

$(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);
    }
});});

<!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>

请告知

编辑（转换的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>

$(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);
    }
});});

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>";

$(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);
    }
});});

<!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>


洪水传感器Web界面
洪水传感器Web界面
此web界面将显示所有表格数据。到
删除，选中相关复选框（或多个复选框）
然后按删除按钮
#
身份证件
日期时间
阅读
地位
大门
2.
2014-12-03_18:24:52
0
保险柜
打开
3.
2014-12-03_18:24:55
13443
保险柜
打开
4.
2014-12-03_18:24:58
35656
小心
打开
6.
2014-12-03_18:25:04
57085
危险
关闭
7.
2014-12-03_18:25:07
28823
小心
打开
8.
2014-12-03_18:25:10
65535
危险
关闭
检查
全部的

我想这会让你想做的事情更容易

$(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);
});
});

演示代码中的主要问题是使用

parent（）
我建议改用最近的（）
试试这个：
$(function () {        
    $('#selectall').change(function () {
        $(this).closest('table').find(':checkbox').prop('checked',this.checked);          
    });
});

请参阅以下API文档：


在此处使用JSFIDLE：
@克里斯·凯维解决了这个问题。首先，检查修改后的javascript代码
其次，正如我在顶部文章中提到的，使用一个旧的1.8.3脚本文件，然后只使用标准
$(document).ready(function(){

以包装脚本。将其另存为SCRIPTNAME.js，然后在库声明后在HTML中声明它（重要！）
我的问题是我使用了新的1.9.1 jQuery库，它以不同的方式处理数据。
希望这有帮助。
代码在哪里停止/中断？尝试console.log（）
不同的位置/对象。@bvx89您好，我尝试在javascript文件的两行之间插入“console.log（）”。但我不完全确定如何查看输出以进行调试。只是为了澄清一下，当我选中id“selectall”复选框时，应该选中上面的所有复选框。这里有一个屏幕截图来表示输出：不清楚问题是什么。在jsfiddle.net中创建一个演示，复制您的issue@charli