当我单击表中的特定 td 时，我想将复选框设置为“已选中”答案

【问题标题】：I want to set my checkbox on "checked" when i click a specific td in my table当我单击表中的特定 td 时，我想将复选框设置为“已选中”
【发布时间】：2020-01-17 13:37:51
【问题描述】：

大家好。单击一行的最后一个 td 字段后，我希望“选中”我的复选框。我用 JQuery 尝试过，但不幸的是我总是选中所有复选框。我只想检查我单击的行的 td。

这就是我构建表格的方式。

<table class="table table-striped" id="notfallTable">
    <tr>
        <th value="name">Name</th>
        <th>Nachname</th>
        <th>Nummer</th>
        <th>Abteilung</th>
        <th id="thCheckbox"><button id="checkAll" class="btn btn-success">Check all</button>
        </th>
   </tr>
</table>
$.getJSON("NotfallSMS.json", function(data){
    var items=[];
    var checkbox="test";
    $.each(data, function(key, val){
        items.push("<tr>");
        items.push("<td contenteditable>"+val.Name+"</td>");
        items.push("<td contenteditable>"+val.Nachname+"</td>");
        items.push("<td contenteditable>"+val.Nummer+"</td>");
        items.push("<td contenteditable>"+val.Abteilung+"</td>")
        items.push("<td class='check'><input class='check' type='checkbox'>"+""+"</input></td>");

        items.push("</tr>");
    });
    $("<tbody/>", {html: items.join("")}).appendTo("table");
});

我希望你能帮助我。你好小精灵

【问题讨论】：

实际尝试设置复选框的函数在哪里？（另外，input 是自动关闭的：/>，不需要使用</input>）

标签： javascript jquery checkbox jquery-click-event

【解决方案1】：

要实现这一点，您可以将 click 事件处理程序连接到 td.check 元素，该元素使用 find() 检索单元格中的复选框并切换其 checked 属性，如下所示：

$('tr td.check').on('click', function() {
  $(this).find(':checkbox').prop('checked', (i, checked) => !checked);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table table-striped" id="notfallTable">
  <tr>
    <th value="name">Name</th>
    <th>Nachname</th>
    <th>Nummer</th>
    <th>Abteilung</th>
    <th id="thCheckbox"><button id="checkAll" class="btn btn-success">Check all</button>
    </th>
  </tr>
  <tbody>
    <tr>
      <td contenteditable>val.Name</td>
      <td contenteditable>val.Nachname</td>
      <td contenteditable>val.Nummer</td>
      <td contenteditable>val.Abteilung</td>
      <td class="check"><input class="check" type="checkbox" /></td>
    </tr>
    <tr>
      <td contenteditable>val.Name</td>
      <td contenteditable>val.Nachname</td>
      <td contenteditable>val.Nummer</td>
      <td contenteditable>val.Abteilung</td>
      <td class="check"><input class="check" type="checkbox" /></td>
    </tr>
  </tbody>
</table>

但是值得注意的是，您可以在没有 JS 或 jQuery 的情况下使用 CSS 来实现完全相同的行为。将复选框包裹在 label 中并使用 CSS 将其设置为 display: block：

label {
  display: block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table table-striped" id="notfallTable">
  <tr>
    <th value="name">Name</th>
    <th>Nachname</th>
    <th>Nummer</th>
    <th>Abteilung</th>
    <th id="thCheckbox"><button id="checkAll" class="btn btn-success">Check all</button>
    </th>
  </tr>
  <tbody>
    <tr>
      <td contenteditable>val.Name</td>
      <td contenteditable>val.Nachname</td>
      <td contenteditable>val.Nummer</td>
      <td contenteditable>val.Abteilung</td>
      <td class="check"><label><input class="check" type="checkbox" /></label></td>
    </tr>
    <tr>
      <td contenteditable>val.Name</td>
      <td contenteditable>val.Nachname</td>
      <td contenteditable>val.Nummer</td>
      <td contenteditable>val.Abteilung</td>
      <td class="check"><label><input class="check" type="checkbox" /></label></td>
    </tr>
  </tbody>
</table>

【讨论】：

【解决方案2】：

$('.check').on('click', function() {
    $($(this).find('input')[0]).prop('checked', true);
}

并从输入中删除检查类

【讨论】：