检查是不是使用 jQuery 勾选了复选框：不同的方法？ [复制]

Posted 2023-03-05

【中文标题】检查是不是使用 jQuery 勾选了复选框：不同的方法？ [复制]

【英文标题】：Checking if a checkbox is ticked using jQuery: different methods? [duplicate]检查是否使用 jQuery 勾选了复选框：不同的方法？ [复制]

【发布时间】：2019-12-15 10:55:10

【问题描述】：

我需要检查我网页上表单中的文本框是否已被选中。我在我的html代码中实现了文本框：

<input type="checkbox" id="language1" name="language1" 
value="Python"> Python

我尝试使用以下代码检查复选框是否已被勾选：

if($('#language1').checked)
    // do some stuff 

这不起作用 - 网站从未识别出被勾选的框。然后我在 Stack Overflow 上一探究竟，发现了上面的两个替代方案，即：

if($('#language1')[0].checked)

和

if($('#language1').is(':checked'));

这两个替代方案中的每一个都有效，但我最初的实现没有。我不明白为什么会这样 - 我认为所有三个选项基本上都应该做同样的事情？热衷于深入了解这一点，因此将不胜感激。

【问题讨论】：

$('#language1').is(':checked')。见:checked Selector

【参考方案1】：

我认为这三个选项本质上应该做同样的事情？

没有。因为checked 属性是输入元素的属性。

$(selector) 返回一个包含元素但不是元素本身的 jQuery 对象，并且 jQuery 对象没有 checked 属性

使用 $(selector)[0] 返回 jQuery 对象中的第一个匹配元素...该属性所在的位置

【参考方案2】：

第一个示例返回与 CSS 选择器匹配的所有元素的列表。在这种情况下，该列表只有一个元素，但与该元素不同。这就是为什么您需要在第二个示例中使用[0]。

（或者，您可以使用 jQuery 的内置 get() 方法来完成同样的事情。）

function print() 
  if ($('#language1').get(0).checked) 
    console.log("Yes");
  
  else 
    console.log("No");
  

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" id="language1" name="language1" 
value="Python"> Python
<br>
<button onclick="print()">Click me</button>

【参考方案3】：

因为 $('#language1') 代表所有适合选择器 #language1 的 HTML 元素的 jQuery 集合，而不是元素本身。 $('#language1')[0] 依次代表该集合中的第一个 HTML 元素。 jQuery在该集合上提供了一个接口与其中的html元素进行交互，并且该接口没有checked属性，因为它太特定于仅复选框，并且是属性，并且不能通过集合接口代理。 .is(':checked')) 是一个方法，如果选择器在其中提供了返回 true ':checked' 适用于集合中的任何（或所有，此处不确定）元素，。这是 JQuery 开发人员如何检查集合中的元素是否已检查标志的方式