[英]How to take the inputs from a parent div and take realtime values from them with Javascript
我遇到了一个我真的不知道如何解决的问题。 例如,我将有一个 div 应用数据属性
<div class="filter-content" data-filters>
<div class="filter-attributes">
<input type="checkbox" name="S1P3">
<input type="checkbox" name="S1P4">
<input type="checkbox" name="S1P5">
<input type="checkbox" name="S1P6">
<input type="checkbox" name="S1P7">
<input type="checkbox" name="S1P8">
<input type="checkbox" name="S1P9">
<input type="checkbox" name="S1P10">
<input type="checkbox" name="S1P2">
<input type="checkbox" name="S1P12">
<input type="checkbox" name="SP52">
<input type="checkbox" name="CI">
<input type="radio" name="CI2">
<input type="radio" name="CI3">
<select name="test">
<option value="test">Test</option>
<option value="test1">Test1</option>
<option value="test2">Test2</option>
<option value="test3">Test3</option>
<option value="test4">Test4</option>
<option value="test5">Test5</option>
<option value="test6">Test6</option>
<option value="test7">Test7</option>
</select>
</div>
</div>
/**
* @return {void}
*/
getFiltersData: function() {
let filtersInputs = document.querySelector('[data-filters]');
console.log(filtersInputs)
},
但我不知道如何在每个输入/ select 上添加一个事件,并在它改变时取值有一个简单的想法吗?
我想你需要这样的东西:
let filtersInputs = document
.querySelector('[data-filters]')
.querySelectorAll('input, select');
filtersInputs.forEach((input)=>{
input.addEventListener('change', (e)=>{
console.log(e.target.value);
})
})
请注意,您没有在 HTML 中分配任何值。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.