[英]Checkbox Check Event Listener
最近,我一直在使用 Chrome 插件 API,我希望开发一个插件,它可以让我更轻松地管理网站。
现在我想做的是在选中某个复选框时触发一个事件。 由于本网站不属于我,我无法更改代码,因此我使用的是 Chrome API。 主要问题之一是没有 ID,而是有名称。 我想知道一旦选中带有“名称”的特定复选框,我是否可以触发该功能。
简短回答:使用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" />
$('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>
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
}
});
});
如果您的 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
}
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.