支票检查不起作用 - 特殊情况

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 Dev Tools参考：

Answer 2

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

＆＃13;

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

OR

＆＃13;

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

使用表ID

＆＃13;

＆＃13;

$('.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);
});

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;