prop checked 不起作用 - 特殊情况

Question

为什么点击第一个按钮时没有弹出？为什么在引用同一个 ckeckbox 时，一个脚本不起作用而另一个脚本正确？

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

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

<table id="table1">
  <input type="checkbox" class="checkbox1" />
  <input type="button" class="button1"  value="Checked1" />
  <input type="button" class="button2"  value="Checked2" />
</table>

Answer 1

因为浏览器正在清理您的标记，并删除 <table id="table1"></table>（因为它不是完整标记的有效标记 -- input 不能是 table 的直接子标记）。

因此，您的选择器 (#table1 .checkbox1) 不匹配任何元素。您呈现的标记如下所示：

<input type="checkbox" class="checkbox1" />
<input type="button" class="button1" value="Checked1" />
<input type="button" class="button2" value="Checked2" />

<table id="table1">

</table>

参考图片来自 Chrome 开发工具：

Answer 2

在呈现上述 html 时，<table id="table1"> 中没有 input 元素，因此您的第一个按钮不起作用。当您从代码中删除 #table1 选择器时，它将起作用。或者您需要添加有效标记，只需将 table 更改为 div.

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

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

<div id="table1">
  <input type="checkbox" class="checkbox1" />
  <input type="button" class="button1"  value="Checked1" />
  <input type="button" class="button2"  value="Checked2" />
</div>

或

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

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

<table id="table1">
  <input type="checkbox" class="checkbox1" />
  <input type="button" class="button1"  value="Checked1" />
  <input type="button" class="button2"  value="Checked2" />
</table>

使用 table id

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

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

<table id="table1">
  <input type="checkbox" class="checkbox1" />
  <input type="button" class="button1"  value="Checked1" />
  <input type="button" class="button2"  value="Checked2" />
</table>

prop checked 不起作用 - 特殊情况

prop checked does not work - special case

checkbox

jquery

prop