复选框检查事件侦听器

Posted 2023-02-22

【中文标题】复选框检查事件侦听器

【英文标题】：Checkbox Check Event Listener

【发布时间】：2013-01-10 17:35:38

【问题描述】：

最近我一直在使用 Chrome 插件 API，我希望开发一个插件，让我更轻松地管理网站。

现在我想做的是在选中某个复选框时触发一个事件。 由于这个网站不属于我，我无法更改代码，因此我使用的是 Chrome API。主要问题之一是有一个名称，而不是一个 ID。我想知道是否可以在选中带有“名称”的特定复选框后触发该功能。

【参考方案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>

【讨论】：

Using the jQuery-like querySelector ...mmm，不是“类 jQuery”（想投反对票）

我的意思是 jQuery 在 Javascript 中广泛使用了查询选择器。在他们出现之前，选择和查找元素是一件麻烦事。

总是使用addEventListener，而不是像onchange这样的直接事件，以获得进一步的兼容性。

@dino onchange 是 supported by all browsers 并且绝对有 no difference between on[event] and addEventListener 除了可能适合或可能不适合您的特定项目的用例。请告诉我我的回答值得否决。它不回答问题吗？

@thordarson onchange 不添加事件侦听器。它取代了现有的。这意味着您仅使用一个事件阻止该对象，并且对于使用同一对象的其他插件或脚本可能不利。如果我有一个“开始聊天”按钮，我希望它被其他主题、插件或脚本所吸引。

【参考方案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

【讨论】：

你是对的，我早在很久以前就对你的答案投了赞成票。我使用 querySelector 方法添加了一个 jQuery 免费选项。

为什么在_selector变量中加下划线？

@Linus：没有技术原因。我相信在回答时我正在与客户一起工作，函数中的所有私有变量都以下划线开头，我想我无意识地以同样的方式回答。没有它们，它的工作原理相同jsfiddle.net/13pog9L8 请注意，在变量中使用或不使用下划线的重要一点是整个代码（您的或您工作的公司）的一致性

你可以这样做： if (event.target.checked) //do something else //do something

@SabU 有上千种方法可以做同样的事情；）

【参考方案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
    

);

【讨论】：

这是最好的答案，值应该从传入的事件中确定，而不是外部选择器:-)