原生JavaScript选择器获取checked属性的方法
在原生JavaScript中，我们可以通过document.querySelector、document.querySelectorAll、document.getElementById等选择器来获取元素，并通过checked属性来判断复选框或单选按钮是否被选中。其中，最常用的方法是document.querySelector。接下来将详细介绍如何使用这些方法，并提供一些实际应用场景。
一、使用document.querySelector选择器获取checked属性
document.querySelector是一个强大的工具，它允许我们使用CSS选择器来选取文档中的第一个匹配元素。要获取复选框或单选按钮的checked属性，我们可以使用以下步骤：
1.1 获取单个元素的checked属性
假设我们有一个复选框，其HTML代码如下：
<input type="checkbox" id="myCheckbox">
我们可以使用document.querySelector来获取这个复选框，并检查其checked属性：
const checkbox = document.querySelector('#myCheckbox');
const isChecked = checkbox.checked;
console.log(isChecked); // 输出true或false
在上述代码中，我们首先使用document.querySelector选择了ID为myCheckbox的元素，并将其保存在变量checkbox中。接着，通过checkbox.checked获取其checked属性值，并存储在变量isChecked中。最后，通过console.log将其打印到控制台。
1.2 获取多个元素的checked属性
有时，我们可能需要获取多个复选框的checked属性。在这种情况下，我们可以使用document.querySelectorAll来选择所有匹配的元素，并通过循环遍历每个元素来检查其checked属性：
假设我们有如下HTML代码：
<input type="checkbox" class="myCheckboxes">
<input type="checkbox" class="myCheckboxes">
<input type="checkbox" class="myCheckboxes">
我们可以使用以下代码来获取所有复选框的checked属性：
const checkboxes = document.querySelectorAll('.myCheckboxes');
checkboxes.forEach((checkbox, index) => {
console.log(`Checkbox ${index + 1} is checked: ${checkbox.checked}`);
});
在上述代码中，我们使用document.querySelectorAll选择了所有类名为myCheckboxes的元素，并将其保存在变量checkboxes中。接着，我们使用forEach方法遍历每个复选框，并打印其checked属性值。
二、使用document.getElementById选择器获取checked属性
除了document.querySelector外，我们还可以使用document.getElementById来选择元素。该方法通过元素的ID来获取单个元素。以下是具体步骤：
2.1 获取单个元素的checked属性
假设我们有一个复选框，其HTML代码如下：
<input type="checkbox" id="myCheckbox">
我们可以使用document.getElementById来获取这个复选框，并检查其checked属性：
const checkbox = document.getElementById('myCheckbox');
const isChecked = checkbox.checked;
console.log(isChecked); // 输出true或false
在上述代码中，我们首先使用document.getElementById选择了ID为myCheckbox的元素，并将其保存在变量checkbox中。接着，通过checkbox.checked获取其checked属性值，并存储在变量isChecked中。最后，通过console.log将其打印到控制台。
2.2 获取多个元素的checked属性
虽然document.getElementById只能选择单个元素，但我们可以结合HTML中的name属性和document.getElementsByName方法来选择多个元素。假设我们有如下HTML代码：
<input type="checkbox" name="myCheckboxes">
<input type="checkbox" name="myCheckboxes">
<input type="checkbox" name="myCheckboxes">
我们可以使用以下代码来获取所有复选框的checked属性：
const checkboxes = document.getElementsByName('myCheckboxes');
checkboxes.forEach((checkbox, index) => {
console.log(`Checkbox ${index + 1} is checked: ${checkbox.checked}`);
});
在上述代码中，我们使用document.getElementsByName选择了所有name属性为myCheckboxes的元素，并将其保存在变量checkboxes中。接着，我们使用forEach方法遍历每个复选框，并打印其checked属性值。
三、使用document.getElementsByClassName选择器获取checked属性
如果我们想要通过类名来选择元素，可以使用document.getElementsByClassName方法。以下是具体步骤：
3.1 获取单个元素的checked属性
假设我们有一个复选框，其HTML代码如下：
<input type="checkbox" class="myCheckbox">
我们可以使用document.getElementsByClassName来获取这个复选框，并检查其checked属性：
const checkbox = document.getElementsByClassName('myCheckbox')[0];
const isChecked = checkbox.checked;
console.log(isChecked); // 输出true或false
在上述代码中，我们首先使用document.getElementsByClassName选择了类名为myCheckbox的第一个元素，并将其保存在变量checkbox中。接着，通过checkbox.checked获取其checked属性值，并存储在变量isChecked中。最后，通过console.log将其打印到控制台。
3.2 获取多个元素的checked属性
假设我们有如下HTML代码：
<input type="checkbox" class="myCheckboxes">
<input type="checkbox" class="myCheckboxes">
<input type="checkbox" class="myCheckboxes">
我们可以使用以下代码来获取所有复选框的checked属性：
const checkboxes = document.getElementsByClassName('myCheckboxes');
Array.from(checkboxes).forEach((checkbox, index) => {
console.log(`Checkbox ${index + 1} is checked: ${checkbox.checked}`);
});
在上述代码中，我们使用document.getElementsByClassName选择了所有类名为myCheckboxes的元素，并将其保存在变量checkboxes中。由于document.getElementsByClassName返回的是一个类数组对象，我们需要使用Array.from将其转换为数组，然后使用forEach方法遍历每个复选框，并打印其checked属性值。
四、实际应用场景
在实际开发中，获取复选框和单选按钮的checked属性非常常见。以下是几个实际应用场景：
4.1 表单验证
在表单提交前，我们通常需要验证用户是否勾选了某些必填项，例如接受条款和条件的复选框。我们可以通过以下代码实现：
const termsCheckbox = document.querySelector('#termsCheckbox');
if (!termsCheckbox.checked) {
alert('请接受条款和条件');
return false;
}
在上述代码中，我们首先使用document.querySelector选择了ID为termsCheckbox的复选框。如果用户没有勾选该复选框，我们会弹出一个警告框，并阻止表单提交。
4.2 动态显示/隐藏内容
我们可以根据复选框或单选按钮的状态，动态显示或隐藏某些内容。例如，用户勾选了一个复选框后，显示额外的表单字段：
const extraFields = document.querySelector('#extraFields');
const toggleCheckbox = document.querySelector('#toggleCheckbox');
toggleCheckbox.addEventListener('change', () => {
if (toggleCheckbox.checked) {
extraFields.style.display = 'block';
} else {
extraFields.style.display = 'none';
}
});
在上述代码中，我们首先选择了ID为extraFields的额外表单字段和ID为toggleCheckbox的复选框。接着，我们为复选框添加了一个change事件监听器，当复选框状态改变时，根据其checked属性值显示或隐藏额外的表单字段。
4.3 批量操作
在一些应用中，我们可能需要为用户提供批量操作的功能，例如批量删除或批量更新。我们可以通过获取所有复选框的checked属性，来确定用户选择了哪些项目：
const checkboxes = document.querySelectorAll('.itemCheckbox');
const selectedItems = [];
checkboxes.forEach((checkbox) => {
if (checkbox.checked) {
selectedItems.push(checkbox.value);
}
});
console.log('Selected items:', selectedItems);
在上述代码中，我们首先选择了所有类名为itemCheckbox的复选框，并将其保存在变量checkboxes中。接着，我们遍历每个复选框，如果其checked属性为true，则将其value属性值添加到selectedItems数组中。最后，我们打印选中的项目。
五、总结
通过本文的介绍，我们了解了如何使用原生JavaScript选择器获取复选框和单选按钮的checked属性，并掌握了document.querySelector、document.querySelectorAll、document.getElementById、document.getElementsByClassName等方法的具体使用方式。此外，我们还探讨了获取checked属性的实际应用场景，包括表单验证、动态显示/隐藏内容和批量操作等。
在实际开发中，掌握这些方法和技巧可以帮助我们更高效地处理用户输入和交互，提升应用的用户体验和功能性。希望本文能够为您提供有价值的参考和帮助。
相关问答FAQs：
1. 如何使用原生JS获取选中（checked）属性？
要获取选中（checked）属性，您可以使用原生JavaScript中的querySelectorAll()方法和属性选择器。
const checkboxes = document.querySelectorAll('input[type="checkbox"]:checked');
这将返回一个NodeList对象，其中包含所有选中的复选框元素。您可以使用forEach()方法遍历这个NodeList并进行进一步的操作。
2. 如何使用原生JS判断复选框是否被选中？
要判断一个复选框是否被选中，您可以使用原生JavaScript中的checked属性。
const checkbox = document.getElementById('myCheckbox');
if (checkbox.checked) {
// 复选框被选中
} else {
// 复选框未被选中
}
您可以根据checked属性的值来执行相应的操作。
3. 如何使用原生JS获取选中复选框的值？
要获取选中复选框的值，您可以遍历所有复选框元素，然后使用checked属性来判断是否被选中，并将选中的值存储在一个数组中。
const checkboxes = document.querySelectorAll('input[type="checkbox"]');
const checkedValues = [];
checkboxes.forEach(function(checkbox) {
if (checkbox.checked) {
checkedValues.push(checkbox.value);
}
});
console.log(checkedValues);
这将输出一个包含所有选中复选框的值的数组。您可以根据需要进一步处理这些值。
文章包含AI辅助创作，作者：Edit2，如若转载，请注明出处：https://docs.pingcode.com/baike/3696443
