Question

我试图找到＆＃34;复选框＆＃34;在父元素表中。下面，我的HTML代码有一个复选框输入，ID为＆＃34; selectall＆＃34;。使用jQuery，当＆＃34; selectall＆＃34;更改，我想，跳过回到父元素表，并找到第一个提及＆＃34;复选框＆＃34;如下：

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表中删除这些记录。 / p>

因此，使用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>

Answer 1

我认为这样可以更轻松地完成您想要的工作。

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

Answer 2

您在演示代码中的主要问题是使用parent()，但您的复选框的父级是td而不是table，因此您无法在DOM上达到足够远的距离

我建议使用closest()（如有问题的代码所示）

试试这个：

$(function () {        
    $('#selectall').change(function () {
        $(this).closest('table').find(':checkbox').prop('checked',this.checked);          
    });
});

请参阅以下API文档：

<强> parent()

<强> closest()

的 DEMO

Answer 3

在这里使用jsfiddle：http://jsfiddle.net/revxaisks/vw6oc4x6/2/

@Chris Caviness解决了这个问题。首先，检查修改后的javascript代码。

其次，就像我在顶部帖子中提到的那样，使用较旧的1.8.3脚本文件，然后只使用标准

$(document).ready(function(){

以包装脚本。将其保存为SCRIPTNAME.js，然后在库声明后在HTML中声明它（重要！）

我的问题是我使用的是更新的1.9.1 jQuery库，它以不同的方式处理数据。希望这会有所帮助。

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

3 个答案: