jQuery, как правильно найти тип элемента родительского элемента в HTML

Я пытаюсь найти «флажок» внутри таблицы родительских элементов. Ниже мой HTML-код имеет флажок с идентификатором «selectall». Использование JQuery, когда «SelectAll» меняется, я хочу, пропустить обратно к столу родительского элемента и найти первое упоминание о «флажке» следующим образом:jQuery, как правильно найти тип элемента родительского элемента в 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>

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

Пожалуйста посоветуйте.

EDIT (Преобразованный 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>

источник

2014-12-04 RevXaisks

Где находится код, который останавливается/прерывается? Попробуйте 'console.log()' разные места/объекты. – bvx89

@ bvx89 привет, я попытался вставить «console.log()» между строками файла javascript. Но я не совсем уверен, как просматривать вывод для целей отладки. Чтобы уточнить, когда я устанавливаю флажок id «selectall», все флажки выше должны быть проверены. Вот скриншот, чтобы представить результат: http://i.imgur.com/E4MbF8t.jpg – RevXaisks

непонятно, в чем проблема. создайте демонстрацию в jsfiddle.net, которая повторяет вашу проблему. – charlietfl

Я думаю, что это будет делать то, что вы хотели гораздо проще.

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

источник

2014-12-04 02:45:24

Спасибо за ваш ответ, этот метод для нового html-кода без необходимости использовать php для эха всех элементов HTML? Причина, по которой мне нужно отделить все HTML и PHP, - это из-за других функций веб-сайта, которые мне нужно сделать, это делает мой проект намного проще (и по соглашению нехорошо эхо HTML через PHP в любом случае?) У меня нет данных формы в моем пересмотренном коде. – RevXaisks

Это должно сработать. Когда selectall изменен, он запускает пользовательское событие mycheck с его проверенным свойством в качестве параметра в событии. Все остальные флажки являются подписчиками на это событие и будут настроены на проверенное свойство. –

Если бы вы могли добавить фактический соответствующий html, а не php-код, было бы намного проще проверить это на jsfiddle –

Ваша главная проблема в демонстрационном коде используется parent() но родитель вашего флажка является td не table, так что вы не достигаете достаточно далеко вверх по DOM.

Я предлагаю использовать closest() (как в коде, показанный на вопрос) вместо

Попробуйте это:

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

Смотрите следующие API Docs:

parent()

closest()

DEMO

источник

2014-12-04 03:20:02 charlietfl

Использование jsfiddle здесь: http://jsfiddle.net/revxaisks/vw6oc4x6/2/

Caviness @ Крис решил проблему. Во-первых, проверьте измененный код javascript.

Во-вторых, как я уже упоминал в верхнем посте, используйте старый файл 1.8.3 скрипт, а затем просто использовать стандартный