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

Question

只有一行具有 highlightRowSelected 类，并且该行的复选框被勾选 - 这是有效的

如何使其他复选框取消选择没有类 highlightRowSelected 的其他复选框，也可以勾选其他行复选框，但不应将类 highlightRowSelected 添加到该行，仅应添加行单击（不是来自复选框 col）类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>

Answer 1

我刚刚更改了你的JS代码的第二个条件，添加到unselect others：

$('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>

Answer 2

use jquery to trigger the function,

ex.

<tr id="1" onclick="checkMe(this.id)"><input type='checkbox'></tr>
<tr id="2" onclick="checkMe(this.id)"><input type='checkbox'></tr>

jquery:

function checkMe(id){
        $(this).closest('[type=checkbox]').attr('checked', true);
}

Answer 3

更新你的 js 函数：

function getdetails(row) {

   if ($(row).find('input[type="checkbox"]').is(":checked")) {
     $(row).find('input[type="checkbox"]').prop('checked', false);
     $(row).removeClass("highlightRowSelected");
     return false;
   }

   var isChecked = false;
   $("#tableID tbody tr").each(function () {
     if ($(this).find('input[type="checkbox"]').is(":checked")) {
        isChecked = true;
     }
   });

   if (isChecked) {
     $(row).find('input[type="checkbox"]').prop('checked', true);
     return false;
   } else {
     $('table input[type="checkbox"]').prop('checked', false);
     $(row).find('input[type="checkbox"]').prop('checked', true);
   }

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

   $(row).addClass("highlightRowSelected");
}

更新fiddle