如何选中和取消选中复选框以及如何使复选框单击行外单击

debugcn 发表于 Dev

三毛

只有一行有一次课程，highlightRowSelected并且该行的复选框被选中 - 这是有效的

如何使其他复选框取消选择没有类highlightRowSelected和其他行的复选框可以打勾，但不应将类添加highlightRowSelected到该行，只有行单击（不是来自复选框列）应将类添加highlightRowSelected到该行

您可以更改函数声明并进行纯 js 调用，而不是在 html 中指定 getdetails(row) .. 此外，行是动态的，因此不能硬编码 id 或 html 中的内容

看看这个小提琴：https : //jsfiddle.net/y7jqb5hp/13/

function getdetails(row) {
  el = window.event.srcElement;
  if (el.id.substr(0, 7) == 'eachRow')
    el = null;
  if (row.cells[0].children[0].checked == false && el != null) {
    row.cells[0].children[0].checked = true;
  } else if (row.cells[0].children[0].checked == false && el != null) {
    row.cells[0].children[0].checked = true;
  }

  $("#tableID tbody tr").each(function() {
    $(this).removeClass("highlightRowSelected");
  });
  
  $(row).addClass("highlightRowSelected");
}

table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

td,
th {
  border: 1px solid #dddddd;
  text-align: left;
  padding: 8px;
}

.highlightRowSelected {
  background-color: #e2e2e2;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="tableID">
  <tr onclick="getdetails(this)">
    <th>checkbox</th>
    <th>Company</th>
    <th>Contact</th>
    <th>Country</th>
  </tr>
  <tr onclick="getdetails(this)">
    <td><input name="eachRow" type="checkbox" /> </td>
    <td>Alfreds </td>
    <td>Maria </td>
    <td>Germany</td>
  </tr>
  <tr onclick="getdetails(this)">
    <td><input name="eachRow" type="checkbox" /> </td>
    <td>Centro </td>
    <td>Francisco </td>
    <td>Mexico</td>
  </tr>
  <tr onclick="getdetails(this)">
    <td><input name="eachRow" type="checkbox" /> </td>
    <td>Ernst </td>
    <td>Roland </td>
    <td>Austria</td>
</table>

丹

我刚刚更改了您的 JS 代码的第二个条件，添加到取消选择其他条件：

$('input:checkbox').removeAttr('checked');

并getdetails从标题行拿走了电话。

还补充道：

$('input:checkbox').click(function(e) {
    e.stopPropagation();
});

与行点击分开处理复选框刻度。

function getdetails(row) {
  el = window.event.srcElement;
  if (el.id.substr(0, 7) == 'eachRow')
    el = null;
  if (row.cells[0].children[0].checked == false && el != null) {
    $('input:checkbox').removeAttr('checked');
    row.cells[0].children[0].checked = true;
  } else if (row.cells[0].children[0].checked == true && el != null) {
    row.cells[0].children[0].checked = false;
  }

  $("#tableID tbody tr").each(function() {
    $(this).removeClass("highlightRowSelected");
  });
  
  $(row).addClass("highlightRowSelected");
}

$('input:checkbox').click(function(e) {
    e.stopPropagation();
});

table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

td,
th {
  border: 1px solid #dddddd;
  text-align: left;
  padding: 8px;
}

.highlightRowSelected {
  background-color: #e2e2e2;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="tableID">
  <tr>
    <th>checkbox</th>
    <th>Company</th>
    <th>Contact</th>
    <th>Country</th>
  </tr>
  <tr onclick="getdetails(this)">
    <td><input name="eachRow" type="checkbox" /> </td>
    <td>Alfreds </td>
    <td>Maria </td>
    <td>Germany</td>
  </tr>
  <tr onclick="getdetails(this)">
    <td><input name="eachRow" type="checkbox" /> </td>
    <td>Centro </td>
    <td>Francisco </td>
    <td>Mexico</td>
  </tr>
  <tr onclick="getdetails(this)">
    <td><input name="eachRow" type="checkbox" /> </td>
    <td>Ernst </td>
    <td>Roland </td>
    <td>Austria</td>
</table>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。