Javascript 当用户单击复选框所在的行时，如何切换复选框？_Javascript_Jquery_Dom

Javascript 当用户单击复选框所在的行时，如何切换复选框？

javascript jquery dom

Javascript 当用户单击复选框所在的行时，如何切换复选框？,javascript,jquery,dom,Javascript,Jquery,Dom,我有一个有两列的表，第一列显示文本，另一列有一个复选框代码如下所示，复选框由JavaScript生成，例如var checkbox=document.createElement（“输入”）如何修改代码以使切换功能正常工作？您可以这样做 const table_foods=document.querySelector（“#records tbody”）表_foods.onclick=e=> { if（e.target.matches（'input[type=checkbox]”）返回//以

我有一个有两列的表，第一列显示文本，另一列有一个复选框

代码如下所示，复选框由JavaScript生成，例如var checkbox=document.createElement（“输入”）

如何修改代码以使切换功能正常工作？

您可以这样做

const table_foods=document.querySelector（“#records tbody”）
表_foods.onclick=e=>
{
if（e.target.matches（'input[type=checkbox]”）返回//以不干扰自然检查操作
让chkBx=e.target.closest（'tr'）.querySelector（'input[type=checkbox]））
chkBx.checked=！chkBx.checked
}

/*外观零件*/
桌子{
边界塌陷：塌陷；
边缘顶部：25px；
字体系列：Arial、Helvetica、无衬线字体；
字体大小：14px；
} 
泰德{
背景颜色：海蓝宝石；
}
t车身{
背景色：#b4c5d8；
}
td，th{
边框：1px纯灰；
填充：.3em.7em；
}


食物选择
沙巫婆
披萨

试试这个。此外，由于HTML不包含任何复选框，您可能希望向问题添加更多详细信息

你不喜欢我的回答吗？你测试过了吗？很有效，谢谢。

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

$(document).ready(function() {
  $('#menu tr').click(function(event) {
    if (event.target.type !== 'checkbox') {
      $(':checkbox', this).trigger('click');
    }
  });
});