使用JavaScript通过其类父元素获取子输入的值

Question

我希望使用Javascript而不是Jquery通过标签类获取输入值。我的HTML代码如下：

<label class="btn btn-secondary button-calculator">
   <input type="radio" name="units[]" id="units1" value="1" autocomplete="off"> US units
</label>

<label class="btn btn-secondary button-calculator  active">
   <input type="radio" name="units[]" id="units2" value="2" autocomplete="off" checked=""> Metric units
</label>

我已经尝试过

document.getElementsByClassName("active").children

并且

document.getElementsByClassName("active").value

我一直在检查console.log的值，但是我没有得到任何有用的信息。

提前感谢您。

- Josep

Answer 1

首先，因为您使用了 getElementsByClassName 作为您的初始选择器，所以您会收到一个元素集合。如果您确定整个页面中只有一个具有该类的元素，则可以使用 [0] 访问它，否则您需要 循环 该元素。

在代码中：

document.getElementsByClassName("active")[0]

现在您有了标签元素，可以使用 childNodes 检索所有子节点。根据您当前的HTML代码仅检索 input，可以使用 querySelector('input')。

示例代码：

document.getElementsByClassName("active")[0].querySelector('input[name="units[]"]')

如果您在页面的其他地方使用active类，则上面的代码可能会引起问题。而且，由于active类很常见，您可能希望更加具体化选择器。

我的建议是将button-calculator类与active类一起使用。

因此，在代码中：

document.getElementsByClassName("active button-calculator")[0].querySelector('input[name="units[]"]')

- Andrea Olivato

Answer 2

getElementsByClassName 可以检索元素的类名，返回一个类似数组的实时节点列表 - 类似数组是因为它看起来像一个数组，但它不能访问大多数数组方法。

使用 querySelectorAll 获取所有活动元素。然后可以将其强制转换为数组 (Array.from(nodelist) 或 [...nodelist]) 并 map 它，返回输入值的整数数组。

const active = document.querySelectorAll('.active');

const values = [...active].map(a => {
  return +a.querySelector('input').value;
});

console.log(values);

<label>
<input type="radio" name="units[]" value="1">US units</input>
</label>
<label class="active">
   <input type="radio" name="units[]" value="2" checked>Metric units</input>
</label>
<label>
<input type="radio" name="units2[]" value="1">Things</input>
</label>
<label class="active">
   <input type="radio" name="units2[]" value="5" checked>Other things</input>
</label>

- Andy

Answer 3

如果存在子元素，您需要选择父元素的元素而不是文档。

let labels = document.querySelectorAll(".button-calculator");
let input1 = labels[0].querySelector("input").value;
let input2 = labels[1].querySelector("input").value;

console.log(`Input 1: ${input1}`)
console.log(`input 2: ${input2}`);

<label class="btn btn-secondary button-calculator">
   <input type="radio" name="units[]" id="units1" value="1" autocomplete="off"> US units
</label>

<label class="btn btn-secondary button-calculator  active">
   <input type="radio" name="units[]" id="units2" value="2" autocomplete="off" checked=""> Metric units
</label>

- ahsan

---

这似乎没有考虑到active类，我认为这是OP想要的，除非我在问题中误解了什么 - undefined

Answer 4

您可以使用querySelector和/或querySelectorAll通过类选择标签，然后再选择active标签内的输入元素 - 如下所示：

（为了清晰起见添加了第3个输入）

document.querySelectorAll('label.active input').forEach( input=>{
  input.addEventListener('click',e=>{
    console.info('Changed value: %s for %s',e.target.value,e.target.id)
  });
  
  console.info('Initial value: %s for %s',input.value,input.id)
})

<label class="btn btn-secondary button-calculator">
   <input type="radio" name="units[]" id="units1" value="1" autocomplete="off"> US units
</label>

<label class="btn btn-secondary button-calculator  active">
   <input type="radio" name="units[]" id="units2" value="2" autocomplete="off" checked=""> Metric units
</label>

<label class="btn btn-secondary button-calculator  active">
   <input type="radio" name="units[]" id="units3" value="3" autocomplete="off"/> Imperial units
</label>

- Professor Abronsius