复选框是我们常用的几种类型的输入字段之一，允许用户通过勾选适用于特定情况的任何框来与网页进行交互，并通常将数据发送到后端。
与单选按钮（属于单选组）相反，属于一个组的复选框并不相互排斥，所以用户可以选择多个适用的复选框。在检查是否有任何选项被选中时，你应该牢记这一点。
在本指南中，我们将看看如何在jQuery中检查一个复选框是否被选中--这是一个流行的JavaScript库，以及Vanilla JavaScript。
element.checked
让我们从一个简单的复选框设置开始。
<h1>Check if Checkbox is Checked</h1>
<p>Have you taken this test before?</p>
<input type="checkbox" id="takenBefore" placeholder="Yes">
<label for="takenBefore">Yes</label>
<button id="button"> Check Checkbox </button>
在纯JavaScript中，检查一个复选框是否被选中就像访问checked ，用一个布尔值表示一样简单。
// Get relevant element
checkBox = document.getElementById('takenBefore');
// Check if the element is selected/checked
if(checkBox.checked) {
// Respond to the result
alert("Checkbox checked!");
}
然而，这段代码只有在你专门运行它时才会运行。例如，你可以在用户提交表单或希望进入下一个页面时运行它，作为一个验证步骤。验证通常不是这样做的，通常会委托给更强大的库。更常见的是，你想对复选框做出反应，以改变页面上的一些东西--比如提供其他输入选项。
在这种情况下，你会想给按钮添加一个事件监听器，让它监听事件，比如被点击。当这样的事件发生时，你可以决定对该事件做出反应。
checkBox = document.getElementById('takenBefore').addEventListener('click', event => {
if(event.target.checked) {
alert("Checkbox checked!");
}
});
在这个设置中--代码一直在等待和监听元素上的事件!现在只要有人点击Checkbox，你的alert() 方法就会执行。然而，这一次，为了获得checkBox 元素，我们从event 实例中获得它，作为该事件的target 。
当你在浏览器中打开页面，并点击按钮，你会看到。
$('#element')[0].checked
**注意：**jQuery是一个流行的JavaScript库，存在于世界各地的许多项目中。由于它的轻量级和扩展JavaScript内置功能的特点--它已经成为一个主力。毫不奇怪，它可以用来检查一个Checkbox是否被选中。
我们可以使用jQuery的选择语法，而不是纯JavaScript的，以简化元素的选择和附加在它身上的事件监听器。
你可以通过内容交付网络（CDN）在你的页面中导入jQuery。你也可以使用jQuery自己的CDN来导入该库。
<script src="https://code.jquery.com/jquery-3.6.0.min.js"
integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
crossorigin="anonymous">
</script>
要检查一个Checkbox是否被选中，在jQuery中，你可以简单地选择元素，得到它的底层对象，而不是jQuery对象（[0] ），并使用内置的checked 属性。
let isChecked = $('#takenBefore')[0].checked
console.log(isChecked);
在这里，我们将测试takenBefore 复选框是否被选中，通过jQuery的选择器访问它，并像以前一样使用固有的checked 领域。
另外，你可以定义一个监听器来检测一个变化。
$('#takenBefore').change(function() {
alert('Checkbox checked!');
});
这段代码要简单得多，但执行的方式与纯JS的解决方案基本相同。点击复选框将像以前一样触发一个警报。
$('#element').is(':checked'))
而不是通过内置的checked 属性进行检查--我们可以将逻辑卸载到is() 方法中。is() 方法是一个通用的方法，可以用于许多目的 - 并根据比较标准返回一个true/false 。:checked 选择器是专门为检查单选按钮或复选框元素是否被选中而设计的。
因此，如果你把这些结合起来，就可以很容易地检查一个复选框is(':checked'):
let isChecked = $('#takenBefore').is(':checked');
console.log(isChecked); // true (if checked at the time)
$('#element').prop("checked")
在jQuery的早期版本中 -attr() 是用来访问和操作元素的字段。在较新的版本中，该方法被替换为prop() 。它可以作为一个元素属性的getter/setter，在我们的例子中 - 作为一个包装器来获取一个元素的checked 属性。
let isChecked = $('#takenBefore').prop('checked');
console.log(isChecked); // true (if checked at the time)
is()vsprop()?
那么，在这种情况下，
is()和prop()之间有什么区别？
从我们的角度来看，这两种方法的工作方式基本相同。那么，有什么区别呢？
is() 与 相比， 的处理和解析开销更大一些。即使考虑到 不prop() prop() 仅仅是访问属性，而且还做了一些验证，当涉及到处理大量的输入时，例如在一个循环中，它的性能更高。
另一方面--is() 总是返回一个boolean 的值，而prop() 只是返回底层属性的类型。你不能保证有别的东西溜进来，如果你不正确使用prop() ，你的代码可能会在运行时失败。is() 也从语义上表明了返回值--一个boolean ，这使它成为一个更可读的选项。
总结
在这个简短的指南中，我们已经看了如何用JavaScript和jQuery来检查复选框是否被选中。
我们使用了checked 属性--直接和间接，然后是is() 和prop() 方法，以及快速查看你可能喜欢的方法。
