按名称选择复选框并检查它是否检查了javascript答案

【问题标题】：select checkbox by name and check if it checked javascript按名称选择复选框并检查它是否检查了javascript
【发布时间】：2017-11-01 20:25:08
【问题描述】：

我正在尝试测试是否选中了复选框。我有更多的输入，它们有不同的名称。我设法选择了输入，但我似乎无法检查它是否被选中。如果我添加到条件“= true”，则在加载页面后会对其进行检查。如果我离开它只是 .checked 它不会做任何事情

我是否选择了正确的输入？请注意，我想按名称而不是 id 或类来选择它
为什么页面加载后我的条件for if语句不起作用？

<input type="checkbox" name="name1">
<input type="checkbox" name="name2">
<input type="checkbox" name="name3">
<input type="checkbox" name="name4">


const firstInput = document.getElementsByName('name1');
if (firstInput[0].checked) {
    console.log('checked');
}

【问题讨论】：

你正在寻找一个名为“1”的元素，但你得到了一个名为“name1”的元素。
哦，是的，对不起，我的意思是“name1”。一旦我检查了它，控制台应该打印检查但它没有
您的代码有效。您在哪里执行检查 - 在函数中，在侦听器中？

标签： javascript select checkbox input

【解决方案1】：

您正在选择名称为“1”的元素，但没有该名称的元素。如果要选择名称属性以“名称”开头的所有输入：

const firstInput = document.querySelectorAll('[name^=name]')

【讨论】：

【解决方案2】：

您需要为该输入添加属性。附加一个 onclick 监听器并调用

getAttribute 设置属性

操纵'checked'属性；

<input type="checkbox" onclick="myFunction()" name="name1">
<input type="checkbox" onclick="myFunction()" name="name2">
<input type="checkbox" onclick="myFunction()" name="name3">
<input type="checkbox" onclick="myFunction()" name="name4">


function myFunction() {
  var $element = document.getElementsByName('name1')[0];
  var checked = $element.getAttribute('checked') === 'true';
  $element.setAttribute('checked', !checked);
  console.log($element.getAttribute('checked'));
}

【讨论】：

感谢您的建议。
我设法将事件侦听器添加到复选框。