如何在JavaScript用jQuery检查/选择一个复选框

在这个简短的指南中，你将学习如何在页面上选择复选框元素，并在JavaScript中检查它们，使用Vanilla JavaScript和jQuery。

我们将使用这个简单的复选框设置。

<h1>Check/Select Checkbox</h1>
<p>Have you taken this test before?</p>
<input type="checkbox" id="takenBefore">
<label for="takenBefore">Yes</label>

<button id="button"> Check Checkbox </button>

element.checked = true

检查或选择一个复选框的绝对最简单的方法是明确地将checked 领域设置为true 。

// Get Element
checkBox = document.getElementById('takenBefore');
// Set the `checked` field to `true`
checkBox.checked = true

为了证明这一点，让我们给一个按钮附加一个事件监听器，然后它为我们编程选择/检查复选框。这是一个良性的例子，但它确实是为了说明问题--你将根据用户的一些动作来检查/选择复选框。

document.getElementById('button').addEventListener('click', event => {
	checkBox = document.getElementById('takenBefore');
	checkBox.checked = true
});

这样做的结果是。

$('#element')[0].checked = true

**注意：**jQuery是一个流行的JavaScript库，存在于世界各地的许多项目中。由于它的轻量级和扩展了JavaScript内置功能的范围--它已经成为一个主力。

我们可以使用jQuery的选择语法，而不是纯JavaScript的，以简化元素的选择和连接到其他元素的事件监听器，导致复选框被选中。如果你在你的项目中已经有了jQuery，那么最终会有更简单的代码，不过，如果这是你所需要做的，可能不值得仅仅为了这个而导入库。

你可以通过内容交付网络（CDN）在你的页面中导入jQuery。你也可以使用jQuery自己的CDN来导入该库。

<script src="https://code.jquery.com/jquery-3.6.0.min.js"
        integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" 
        crossorigin="anonymous">
</script>

现在，在安装了jQuery之后--你可以很容易地像以前一样把checked 属性设置为true ，但语法更简单。

$('#takenBefore')[0].checked = true

[0]在这里，我们得到一个jQuery对象，而不是选择器的底层元素，因此，我们将不得不下标它，并获得底层对象，以访问checked 属性。

以同样的方式，如果我们想根据一些其他的动作来触发这段代码，比如说按下按钮。

$('#button').on('click', function() {
	$('#takenBefore')[0].checked = true
});

这种语法比我们之前使用的语法要简单得多，不过，它在功能上是等同的。

这种方法的缺点是--它很原始。我们只是利用了更简单的选择语法，但最终只是明确地将属性设置为true 之后。还有另一种方法来设置该属性，但更隐蔽。

$('#element').prop("checked", true)

prop() 函数接受一个键值参数集--我们想访问的属性名称和我们想给它分配的值。该方法本身会进行验证，而当我们像以前那样明确地将属性设置为true ，则不会进行验证。

一般来说，如果你已经在使用jQuery，建议使用prop() ，而不是显式地设置属性，因为有验证的额外好处。

也就是说，设置复选框被选中/被选中是很容易的。

$('#takenBefore').prop('checked', true);

再说一遍，因为它通常是在其他事件中被触发的。

$('#button').on('click', function() {
	$('#takenBefore').prop('checked', true);
});

$('#element').attr("checked", true)

在旧版本的jQuery中，由于项目的限制，你可能会被迫使用，prop() 函数之前有一个attr() 函数，用来设置元素的属性。

在这种情况下，它的工作方式与prop() 基本相同。

$('#takenBefore').attr('checked', true);

再说一遍，因为它通常是在一些其他事件上被触发的。

$('#button').on('click', function() {
	$('#takenBefore').attr('checked', true);
});

总结

在这个简短的指南中，我们已经看了如何使用Vanilla JavaScript和jQuery将一个复选框设置为 "checked"/selected。

我们看了一些最简单的方法，比如明确地设置属性，并努力使用jQuery的封装方法进行验证。