prop('checked')属性失效特殊场景：为何同一复选框操作效果不同？

嘿，这问题的根源其实出在HTML表格的结构不规范上，咱们一步步说清楚：

为什么点击button1时checkbox没反应？ #

HTML里的<table>标签有严格的结构要求——它的直接子元素必须是<thead>、<tbody>或者<tr>这类表格专用元素，不能直接塞<input>这种表单控件。浏览器遇到这种不符合规范的代码时，会自动“修正”DOM结构：它会把你的<input type="checkbox" class="checkbox1">直接移到<table>标签的外面（你可以打开浏览器的开发者工具→Elements面板，看看实际的DOM树就明白了）。

而你的button1点击事件里用的选择器是$('#table1 .checkbox1')，这个选择器的意思是“找#table1内部所有带checkbox1类的元素”，但此时checkbox已经不在table里面了，这个选择器自然找不到任何元素，也就没法设置checked状态了。

为什么button2的脚本能正常工作？ #

button2用的选择器是$('.checkbox1')，这是全局查找页面上所有带checkbox1类的元素，不管它在DOM的哪个位置，所以哪怕checkbox被浏览器移到了table外面，这个选择器依然能找到它，从而成功设置选中状态。

怎么修复？ #

只需要把表格里的元素放到正确的表格结构里就行，给它们套上<tr>和<td>：

修正后的HTML代码

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<table id="table1">
  <tr>
    <td>
      <input type="checkbox" class="checkbox1" />
      <input type="button" class="button1" value="Checked1" />
      <input type="button" class="button2" value="Checked2" />
    </td>
  </tr>
</table>

JS代码不用改，直接保留就行

$('.button1').click(function(event) {
  //console.log("click1");
  $('#table1 .checkbox1').prop('checked',true);
});
$('.button2').click(function(event) {
  //console.log("click2");
  $('.checkbox1').prop('checked',true);
});

这样修改后，两个按钮点击时都能正确选中checkbox了——此时checkbox确实在#table1内部，$('#table1 .checkbox1')可以精准匹配到目标元素。

内容的提问来源于stack exchange，提问作者Samir Llorente