复选框检查事件监听器

最近我一直在与 Chrome 插件 API 工作，我希望开发一个插件，这将使我的生活更容易管理一个网站。

现在，我希望在选中某个复选框时触发一个事件。 由于这个网站不属于我，我不能改变的代码，所以我使用的 Chrome API。其中一个主要问题是没有 ID，而是有一个 Name。我想知道是否可以在选中带有“ name”的复选框后触发该函数。

260515 次浏览
小开
最佳答案

简短的回答: 使用 change事件。这里有一些实际的例子。因为我误解了这个问题，所以我将包含 jQuery 示例和普通的 JavaScript。但是，如果使用 jQuery 的话，您并没有获得多少收益。

一个复选框

使用 querySelector。

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" />

Single checkbox with 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>

小开

因为我在 OP 中没有看到 jQuery标记，所以这里只有 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
}
});
});

参见 译自: 美国《科学》杂志网站(http://JSFIDDLE.net/wewtnbpc/1/”> JSFIDDLE

小开

If you have a checkbox in your html something like:

<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
}


});

提交答案