表格行或单元格点击勾选复选框

复选框太小，我点不到啊

最近发现表格里面有复选框的，但是复选框太小了不容易点，就有了让复选框更容易选中的想法。

直接上代码

// html 部分
<link rel="stylesheet" type="text/css" href="lib/Bootstrap/css/bootstrap.min.css"/>
<script src="js/jquery-1.12.4.js" type="text/javascript" charset="utf-8"></script>
...
<table class="table">
  <tr>
    <th>姓名</th>
    <th>性别</th>
    <th>年龄</th>
    <th></th>
  </tr>
  <tr>
    <td>大傻</td>
    <td>男</td>
    <td>32</td>
    <td class="tdcheck"><input type="checkbox" id="checkbox-0" name="checkbox" /></td>
  </tr>
  <tr>
    <td>二傻</td>
    <td>男</td>
    <td>29</td>
    <td class="tdcheck"><input type="checkbox" id="checkbox-1" name="checkbox" />
  </tr>
</table>

• 点击行 复选框选中

$("tr").slice(1).on('click', function (event) { // slice(1) 去掉表头
  // 找到checkbox对象
  var chks = $("input[type='checkbox']",this);
  if ( chks.prop("checked") ) {
    chks.prop("checked",false);
  } else {
    chks.prop("checked",true);
  }
});

• 点击复选框所在单元格 复选框选中

$(".tdcheck").on('click', function(event) {
  var checkbox = $(this).find(":checkbox");
  if ( checkbox.prop("checked") ) {
    // checkbox.removeAttr("checked");
    checkbox.prop("checked", false);
  } else {
    checkbox.prop("checked", true);
  }
});

但是这样发现一个问题，我点复选框反而没反应了。打断点才发现，原来是事件冒泡了
解决方法就是点击复选框的时候阻止冒泡就好

var $input = $("input[type='checkbox']");
for (let i = 0; i < $input.length; i++) {
  $($input[i]).click(function(e) {
    e = window.event || e;
    if(document.all) {
      e.cancelBubble = true;
    } else {
      e.stopPropagation();
    }
  });
}

好了，问题解决了，如果有不对的地方请多多指教。