道具检查不起作用 - 特殊情况答案

【问题标题】：prop checked does not work - special case道具检查不起作用 - 特殊情况
【发布时间】：2018-05-15 17:09:13
【问题描述】：

为什么当你点击第一个按钮时没有被选中？为什么在引用同一个复选框时，一个脚本不起作用，而另一个脚本却正确？

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

【问题讨论】：

标签： jquery checkbox prop

【解决方案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 开发工具：

【讨论】：

我不想将其从表格中删除，我想知道为什么这些按钮引用同一个复选框，一个有效而另一个无效
@SamirLlorente 不，我不是建议你删除表格...看看浏览器如何呈现你的标记。它无效，因此 浏览器 将您的input 元素呈现在表格外部，因此您的选择器无效。
为什么说选择器无效，有什么解释吗？
我想你还没有理解我，你会怎么做选择表格里面的复选框，但是用id指定表格
@SamirLlorente 使表格标记有效（通过添加 <tr> 和 <td>）。

【解决方案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>

使用表 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>

【讨论】：

请为已经发布的答案投票，而不是复制它们。
@BenM 好的，确定，正在输入，当发布答案时已经有一个答案。
我知道这样可以，请问如果两个按钮都引用了复选框，为什么它不起作用
@SamirLlorente 您的代码不起作用，因为在浏览器中呈现时，table1 id 元素内没有 checkbox1 类的子元素。
你确定@5740382 因为如果我进行属性更改它工作正常