Question

在我的代码中，当您点击第一个<td>时，会选中它的复选框。但我的目标是checkbox应该通过tr点击选择。因此，当我点击任何<tr>时，将选择其checkbox。为此，我已经尝试替换点击类＆＃34; .checktd＆＃34;到＆＃34; .odd＆＃34;但这不起作用。

我知道如何实现这一目标？

＆＃13;

$(".checktd").on("click", function(e) {
  if (this != e.target) {
    return;
  }
  var check = $(this).find("input[type=checkbox]");
  check.prop('checked', !check[0].checked);
});

＆＃13;

table,
th,
td {
  border: 1px solid black;
  border-collapse: collapse;
}

th,
td {
  padding: 5px;
  text-align: left;
}

＆＃13;

<!DOCTYPE html>
<html>
<head>
  <title></title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>

<body>
  <table style="width:40%">
    <tr>
      <th>Check</th>
      <th>Name</th>
      <th>Telephone</th>
    </tr>
    <tr class="odd">
      <td class="checktd"><input type="checkbox" class="checkItem"></td>
      <td>Bill Gates</td>
      <td>55577854</td>
    </tr>
    <tr class="odd">
      <td class="checktd"><input type="checkbox" name="checkItem"></td>
      <td>Kevin Gates</td>
      <td>544444</td>
    </tr>
  </table>
</body>

</html>

＆＃13;

JsFiddle如果需要链接。

Answer 1

修改this!=e.target并检查它是否为复选框。
将您的选择器从".checktd"更改为"table tr"。我建议您通过在table或tr上添加课程来使用更具体的选择器。

$("table tr").on("click", function(e) {
  if($(e.target).is("input[type='checkbox']"))
    return;
  var check = $(this).find("input[type=checkbox]");
  check.prop('checked', !check[0].checked);
});

table,
th,
td {
  border: 1px solid black;
  border-collapse: collapse;
}

th,
td {
  padding: 5px;
  text-align: left;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table style="width:40%">
  <tr>
    <th>Check</th>
    <th>Name</th>
    <th>Telephone</th>
  </tr>
  <tr class="odd">
    <td class="checktd"><input type="checkbox" class="checkItem"></td>
    <td>Bill Gates</td>
    <td>55577854</td>
  </tr>
  <tr class="odd">
    <td class="checktd"><input type="checkbox" name="checkItem"></td>
    <td>Kevin Gates</td>
    <td>544444</td>
  </tr>
</table>

Answer 2

这对您有用

我刚从你的小提琴中删除了这段代码 - if (this != e.target) { return; }。

如果您点击了checkbox我使用event.target.type进行检查后点击了checkbox，那么为了遵循默认操作，这对我来说很好。

$(".odd").on("click", function(e) {
console.log(event.target.type);
  if(event.target.type != 'checkbox') {
    var check = $(this).find("input[type=checkbox]");
    check.prop('checked', !check[0].checked);
  }
});

table,
th,
td {
  border: 1px solid black;
  border-collapse: collapse;
}

th,
td {
  padding: 5px;
  text-align: left;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<table style="width:40%">
  <tr>
    <th>Check</th>
    <th>Name</th>
    <th>Telephone</th>
  </tr>
  <tr class="odd">
    <td class="checktd"><input type="checkbox" class="checkItem"></td>
    <td>Bill Gates</td>
    <td>55577854</td>
  </tr>
  <tr class="odd">
    <td class="checktd"><input type="checkbox" name="checkItem"></td>
    <td>Kevin Gates</td>
    <td>544444</td>
  </tr>
</table>

希望这对你有所帮助。

Answer 3

点击tr，找到包含input属性的name元素，然后检查它是否为checked。如果选中，则使用prop反之亦然

取消选中

$("tr").on("click", function(e) {
  if ($(this).find('input[name="checkItem"]')[0].checked) {

    $(this).find('input[name="checkItem"]').prop('checked', false)
  } else {
    $(this).find('input[name="checkItem"]').prop('checked', true)

  }
});

table,
th,
td {
  border: 1px solid black;
  border-collapse: collapse;
}

th,
td {
  padding: 5px;
  text-align: left;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table style="width:40%">
  <tr>
    <th>Check</th>
    <th>Name</th>
    <th>Telephone</th>
  </tr>
  <tr class="odd">
    <td class="checktd"><input type="checkbox" name="checkItem"></td>
    <td>Bill Gates</td>
    <td>55577854</td>
  </tr>
  <tr class="odd">
    <td class="checktd"><input type="checkbox" name="checkItem"></td>
    <td>Kevin Gates</td>
    <td>544444</td>
  </tr>
</table>

Answer 4

检查JsFiddle的变化

$("table td").on("click", function (e) {
  if (this != e.target) { return; }
  var check = $(this).parent("tr").find("input[type=checkbox]");
  check.prop('checked', !check[0].checked);
});

Solution

复选框按tr单击选择

4 个答案: