最近我一直在使用 Chrome 插件 API，我正在寻找一个插件，它可以让我更轻松地管理网站。
现在我想做的是在选中某个复选框时触发一个事件。由于本网站不属于我，我无法更改代码，因此我使用的是 Chrome API。主要问题之一是没有 ID，而是有名称。我想知道是否可以在选中带有“名称”的特定复选框后触发该功能。
复选框 检查事件侦听器
IT技术
javascript
html
google-chrome
google-chrome-extension
dom-events
2021-01-24 06:07:12
3个回答
简短回答：使用change事件。这里有几个实际的例子。由于我误读了这个问题，我将包括 jQuery 示例和纯 JavaScript。但是，通过使用 jQuery，您并没有获得太多（如果有的话）。
单个复选框
var checkbox = document.querySelector("input[name=checkbox]");
checkbox.addEventListener('change', function() {
if (this.checked) {
console.log("Checkbox is checked..");
} else {
console.log("Checkbox is not checked..");
}
});<input type="checkbox" name="checkbox" />带有 jQuery 的单个复选框
$('input[name=checkbox]').change(function() {
if ($(this).is(':checked')) {
console.log("Checkbox is checked..")
} else {
console.log("Checkbox is not checked..")
}
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" name="checkbox" />多个复选框
这是复选框列表的示例。要选择多个元素，我们使用querySelectorAll而不是querySelector. 然后使用Array.filter和Array.map提取检查值。
// Select all checkboxes with the name 'settings' using querySelectorAll.
var checkboxes = document.querySelectorAll("input[type=checkbox][name=settings]");
let enabledSettings = []
/*
For IE11 support, replace arrow functions with normal functions and
use a polyfill for Array.forEach:
https://vanillajstoolkit.com/polyfills/arrayforeach/
*/
// Use Array.forEach to add an event listener to each checkbox.
checkboxes.forEach(function(checkbox) {
checkbox.addEventListener('change', function() {
enabledSettings =
Array.from(checkboxes) // Convert checkboxes to an array to use filter and map.
.filter(i => i.checked) // Use Array.filter to remove unchecked checkboxes.
.map(i => i.value) // Use Array.map to extract only the checkbox values from the array of objects.
console.log(enabledSettings)
})
});<label>
<input type="checkbox" name="settings" value="forcefield">
Enable forcefield
</label>
<label>
<input type="checkbox" name="settings" value="invisibilitycloak">
Enable invisibility cloak
</label>
<label>
<input type="checkbox" name="settings" value="warpspeed">
Enable warp speed
</label>jQuery 的多个复选框
let checkboxes = $("input[type=checkbox][name=settings]")
let enabledSettings = [];
// Attach a change event handler to the checkboxes.
checkboxes.change(function() {
enabledSettings = checkboxes
.filter(":checked") // Filter out unchecked boxes.
.map(function() { // Extract values using jQuery map.
return this.value;
})
.get() // Get array.
console.log(enabledSettings);
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label>
<input type="checkbox" name="settings" value="forcefield">
Enable forcefield
</label>
<label>
<input type="checkbox" name="settings" value="invisibilitycloak">
Enable invisibility cloak
</label>
<label>
<input type="checkbox" name="settings" value="warpspeed">
Enable warp speed
</label>由于我没有jQuery在 OP 中看到该标签，这里是一个仅使用javascript 的选项：
document.addEventListener("DOMContentLoaded", function (event) {
var _selector = document.querySelector('input[name=myCheckbox]');
_selector.addEventListener('change', function (event) {
if (_selector.checked) {
// do something if checked
} else {
// do something else otherwise
}
});
});
如果您的 html 中有一个复选框，例如：
<input id="conducted" type = "checkbox" name="party" value="0">
并且您想使用 javascript 在此复选框中添加一个 EventListener，在关联的 js 文件中，您可以执行以下操作：
checkbox = document.getElementById('conducted');
checkbox.addEventListener('change', e => {
if(e.target.checked){
//do something
}
});
其它你可能感兴趣的问题