在纯 javascript 中抓取自由文本和单选按钮值

Question

我有几个单选按钮，最后一个单选按钮旁边有一个自由文本选项。我成功地获得了单选按钮或自由文本的值，但从未在同一函数中同时获得两者。

如果我有 3 个选择，而第 4 个选择是另一个，我希望函数在不创建单独的 Javascript 函数的情况下获取值。

这是我的尝试：

<input type="radio" id = "choice1" name="snooze" value="samplechoice0" onClick='valuechanged();'/> samplechoice0<br>
<input type="radio" id = "choice2" name="snooze" value="samplechoice1" onClick='valuechanged();'/> samplechoice1<br>
<input type="radio" id = "choice3" name="snooze" value="samplechoice2" onClick='valuechanged();'/> samplechoice2 <br>
<input type="radio" id = "choice10" name="snooze" value="Normal Radio"  onClick='valuechanged();'/>
<input type="text"  id = "choice11" class="tb" name="tb1"  placeholder="Enter Other Reason Here" onkeypress='valuechanged();' > <br>

function Submit() {
var items=document.getElementsByClassName('radio');
var selectedItems=" ";
for(var i=0; i<items.length; i++) {
if(items[i].type=='radio' && items[i].checked==true && document.getElementById('choice10').checked==false) {
selectedItems+=items[i].value+"; ";
}
}
if(document.getElementById("choice10").checked == true) {
selectedItems = document.getElementById('choice11').value;

}
alert(selectedItems);
}

Answer 1

假设我理解你的问题，我会使用与无线电输入值匹配的名称将两者配对在一起。例如，如果您有一个带有value="other"的无线电输入，只需创建一个带有name="otherText"的文本框

然后，使用像{ snooze, snoozeText }这样的对象，允许这两个值都可能undefined、空字符串或在您的情况下的任何其他工作。例如：

document.querySelector('.js-snooze-form').addEventListener('submit', e => {
e.preventDefault()
const formElements = e.currentTarget.elements

// Get the snooze value
const snoozeEl = Array.from(formElements.snooze).filter(el => el.checked)[0]
const snooze = snoozeEl && snoozeEl.value

// Get the paired text, if any
const snoozeTextEl = formElements[`${snooze}Text`]
const snoozeText = snoozeTextEl && snoozeTextEl.value

// "Return" the checked snooze value paired with the reason text
console.log({ snooze, snoozeText })
})

form {
display: grid;
gap: 1em;
justify-items: start;
}

<form class="js-snooze-form">
<label><input type="radio" name="snooze" value="0" />Choice 0</label>
<label><input type="radio" name="snooze" value="1" />Choice 1</label>
<label><input type="radio" name="snooze" value="2" />Choice 2</label>
<!-- Define a pairing between other & otherText -->
<div>
<label><input type="radio" name="snooze" value="other" />Other:</label>
<input name="otherText" placeholder="Enter Other Reason Here" />
</div>
<button>Submit</button>
</form>

Answer 2

您可以通过使其等于用户给出的文本来动态更改带有自由文本的最后一个单选按钮的 ID。 我还在以下代码中添加了当用户在最后一个单选按钮旁边输入文本时，会自动选中最后一个单选按钮。 然后，您可以获取选中的单选按钮的ID。

<form id="radiobuttonForm" name="radiobuttonForm">
<input type="radio" name="choice" id="choice1"> samplechoice0
<br>        
<input type="radio" name="choice" id="choice2"> samplechoice1
<br>
<input type="radio" name="choice" id="choice3"> samplechoice2
<br>
<input type="radio" name="choice" id="other" class="other_reason_radio"> samplechoice3 
input type="text" id="other_reason_text_input"/>
</form>

var choice;
function getChoice(){
var radios = document.forms["radiobuttonForm"].elements["choice"];
for(var i = 0, max = radios.length-1; i < max; i++) {
radios[i].onclick = function() {
choice=this.id;
console.log('choice: ', choice);
}
}
radios[radios.length-1].onclick = function() {
document.getElementsByClassName("other_reason_radio")[0].id=document.getElementById("other_reason_text_input").value;
choice=this.id;
console.log('choice: ', choice);
}   
}
document.getElementById("radiobuttonForm").addEventListener("click", getChoice());
document.getElementById('other_reason_text_input').addEventListener('input', function() {
document.getElementsByClassName("other_reason_radio")[0].checked = true;
document.getElementsByClassName("other_reason_radio")[0].id=document.getElementById("other_reason_text_input").value;
choice=document.getElementById("other_reason_text_input").value;
console.log('choice: ', choice);
});