单击行上的任意位置以选中复选框并突出显示它？

Question

我有一个脚本，它将从 mysql DB 中获取结果，并以整洁的表格格式显示带有所有结果的复选框。 我想让它像，单击行上的任意位置以触发复选框并突出显示整行。一次可选择多行。

我已经尝试了 onlclick 和 getElementById 功能的 JS 方法，并在 CSS 中使用 :checked。 到目前为止没有任何进展。

<table id="tab-1">
    <thead>
        <tr>
            <th scope="col">Select</th>
            <th scope="col">ID</th>
            <th scope="col">A</th>
            <th scope="col">B</th>
            <th scope="col">C</th>
            <th scope="col">D</th>
            <th scope="col">E</th>
            <th scope="col">E</th>
            <th scope="col">F</th>
            <th scope="col">G</th>
            <th scope="col">H</th>
            <th scope="col">I</th>
            <th scope="col">J</th>
            <th scope="col">k</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td><input type="checkbox" name="checkbox[]" id="checkbox[]" value="<?php echo $row['ID']; ?>"  /></td>
            <td><?php echo $row['ID']; ?></td>
            <td><?php echo $row['A']; ?></td>
            <td><?php echo $row['B']; ?></td>
            <td><?php echo $row['D']; ?></td>
            <td><?php echo $row['E']; ?></td>
            <td><?php echo $row['F']; ?></td>
            <td><?php echo $row['G']; ?></td>
            <td><?php echo $row['H']; ?></td>
            <td><?php echo $row['I']; ?></td>
            <td><?php echo $row['J']; ?></td>
            <td><?php echo $row['K']; ?></td>
            <td><?php echo $row['L']; ?></td>
            <td><?php echo $row['M']; ?></td>
        </tr>
    </tbody>
<table>

Answer 1

如果你会用jquery，你可以试试

$(document).on('click','tr',function(){
 $(this).find('input[type="checkbox"]').prop('checked',true);
 $(this).css('background','yellow'); // or anything else for highlighting purpose
});

根据 cmets 更新 JSFiddle

Answer 2

例如像这样使用 jQuery:

$('#table').on('click', 'tr', function() {
    $(this).find('td:first :checkbox').trigger('click');
})
.on('click', ':checkbox', function(e) {
    e.stopPropagation();
    $(this).closest('tr').toggleClass('selected', this.checked);
});

演示：http://jsfiddle.net/3E4Lk/2/

Answer 3

您可以使用 classList.toggle 切换行上的活动类，并使用 !ele.checked 切换复选框的选中状态。

CSS

tr.active {
   background:rgba(0,255,0,0.35);
}

Javascript

function rowClicked(){
   var inputs = this.getElementsByTagName("input");
   var checkboxes = [].filter.call(inputs,function(input){
      return input.type == "checkbox" && input.name == "checkbox[]";
   });
   this.classList.toggle("active");       
   if(checkboxes[0]) checkboxes[0].checked = this.classList.contains("active")

}
window.addEventListener("load",function(){
   var table = document.getElementById("tab-1");
   var rows = table.getElementsByTagName("tbody")[0].getElementsByTagName("tr");
   for(var i=0; i<rows.length; i++){
      rows[i].addEventListener("click",rowClicked);
   }
});

JSFiddle