復選框 檢查事件偵聽器

Question

最近，我一直在使用 Chrome 插件 API，我希望開發一個插件，它可以讓我更輕松地管理網站。

現在我想做的是在選中某個復選框時觸發一個事件。 由於本網站不屬於我，我無法更改代碼，因此我使用的是 Chrome API。 主要問題之一是沒有 ID，而是有名稱。 我想知道一旦選中帶有“名稱”的特定復選框，我是否可以觸發該功能。

Answer 1

簡短回答：使用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" />

帶有 jQ​​uery 的單個復選框

 $('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>

Answer 2

由於我在 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
        }
    });
});

見JSFIDDLE

Answer 3

如果您的 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
    }

});