猿问

如何在用户单击复选框所在的行时切换复选框?

我有一个有 2 列的表格,第一列显示文本,另一列有一个复选框。


代码如下,复选框由JavaScript生成,例如 var checkbox = document.createElement("input");


<script type="text/javascript">

      function create_table() {

       var data = ["Sandwidch", "Hamburger", "Bacon"];

       var table = document.getElementById("menu");

       for (var option in data) {

          var row = table.insertRow(-1);

          var cell1 = row.insertCell(0);

          cell1.innerHTML = data[option];


          var cell2 = row.insertCell(1);

          var checkbox = document.createElement("input");

          checkbox.type = "checkbox";

          checkbox.name = "choiceCbx";

          cell2.appendChild(checkbox);

        }

      }

      window.onload = create_table;

</script>


<body>

    <table id="menu">

        <tr>

           <th>Food</th>

           <th>Choice</th>

        </tr>

    </table>

</body>

当用户点击表格中的某一行时,如果该行上的复选框被选中,它应该变为未选中,反之亦然。


我使用以下代码来切换复选框但徒劳无功,它似乎只检测到“TH”行,而不是“TR”行:


$(document).ready(function() {

  $('#menu tr').click(function(event) {

    if (event.target.type !== 'checkbox') {

      $(':checkbox', this).trigger('click');

    }

  });

});

我应该如何修改我的代码以使切换功能起作用?


阿波罗的战车
浏览 92回答 2
2回答

喵喵时光机

你可以这样做...const table_foods = document.querySelector('#records tbody')table_foods.onclick=e=>&nbsp; {&nbsp; if (e.target.matches('input[type=checkbox]')) return&nbsp; // to not disturb&nbsp; natural check action&nbsp; let chkBx = e.target.closest('tr').querySelector('input[type=checkbox]')&nbsp; chkBx.checked = !chkBx.checked&nbsp;&nbsp;&nbsp; }&nbsp;/* cosmetic part */table {&nbsp; border-collapse: collapse;&nbsp; margin-top: 25px;&nbsp; font-family: Arial, Helvetica, sans-serif;&nbsp; font-size: 14px;&nbsp; }&nbsp;thead {&nbsp; background-color: aquamarine;&nbsp; }tbody {&nbsp; background-color: #b4c5d8;}td, th {&nbsp; border: 1px solid grey;&nbsp; padding: .3em .7em;}<table id="records" class="content">&nbsp; <thead>&nbsp; &nbsp; <tr> <th>Food</th> <th>Choice</th> </tr>&nbsp; </thead>&nbsp; <tbody>&nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; <td>Sandwitch</td>&nbsp; &nbsp; &nbsp; <td><input type="checkbox" name="answerCbx-1" /></td>&nbsp; &nbsp; </tr>&nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; <td>pizza</td>&nbsp; &nbsp; &nbsp; <td><input type="checkbox" name="answerCbx-2" /></td>&nbsp; &nbsp; </tr>&nbsp; </tbody></table>

陪伴而非守候

尝试这个。此外,您可能想为您的问题添加更多详细信息,因为 HTML 不包含任何复选框https://forum.jquery.com/topic/toggle-checkboxes-in-a-table-after-click-function
随时随地看视频慕课网APP

相关分类

JavaScript
我要回答