我正在从html表单收集数据,因为单击单选按钮并按名称值对推入数组。
如果数组中已存在先前的名称值,我需要保留推送的最新数据。
在下面的HTML中,我需要每个组中有一个名称/值。
如果当前选择匹配,如何弹出上一个值?
我只需要一个 纯JavaScript解决方案。
A组:颜色。
<p class="question">What is your favorite color?</p>
<p>
<input type="radio" id="red" name="color" value="Red">
<label for="red">Red</label>
</p>
<p>
<input type="radio" id="blue" name="color" value="Blue">
<label for="blue">Blue</label>
</p>
<p>
<input type="radio" id="green" name="color" value="Green">
<label for="green">Green</label>
</p>
<p>
<input type="radio" id="yellow" name="color" value="yellow">
<label for="yellow">Yellow</label>
</p>
B组:天气:
<p class="question">What is your favorite weather?</p>
<p>
<input type="radio" id="summer" name="weather" value="Summer">
<label for="summer">Summer</label>
</p>
<p>
<input type="radio" id="winter" name="weather" value="Winter">
<label for="winter">Winter</label>
</p>
<p>
<input type="radio" id="spring" name="weather" value="Spring">
<label for="spring">Spring</label>
</p>
<p>
<input type="radio" id="fall" name="weather" value="Fall">
<label for="fall">Fall</label>
</p>
使用Javascript:
var answer = [];
var option = document.getElementsByTagName('input');
var output = document.getElementById('output');
for (var i = option.length; i--;) {
option[i].addEventListener('click', function () {
for (var i = 0; i < option.length; i++) {
if (option[i].type == 'radio' && option[i].checked) {
answer.push({name: option[i].name, value: option[i].value});
}
}
// Alert for demo only.
alert(JSON.stringify(answer));
}, false);
}
在下面的屏幕截图中,我只需要突出显示的数据: