复选框按单击“ TR”选择

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

有什么想法我该如何实现？

$(".checktd").on("click", function(e) {
  if (this != e.target) {
    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;
}

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

JSFIDDLE链接(如果需要(。

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

这将适合您

我刚刚从小提琴中删除了此代码-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>

希望这对您有帮助。

在单击tr时，请找到具有name属性的input元素，并检查它是否为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>

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

解决方案

相关内容

最新更新

热门标签：