如何检索输入到下一个HTML页面的调查单选按钮？使用本地存储和纯JavaScript

Question

我正在尝试使用调查表中的用户信息创建一个响应页面。但是，我无法检索单选按钮的输入。它显示“开”。有什么帮助吗？

<!--Survey form-->

<label for="gender" class="question">Gender:</label>

<ol>

<li>

<input type="radio" id="female" name="gender" checked/>

<label class="gender" for="female">Female</label>

</li>

<li>

<input type="radio" id="male" name="gender" />

<label class="gender" for="male">Male</label>

</li>

</ol>

<input type="button" value="Submit Me" name="doIt" />

<!--JS-->

function (doIt){

var checkedValue = null;

var inputElements = document.getElementsByName('gender');

for (var i=0; inputElements[i]; i++){

    if (inputElements[i].checked){

    checkedValue = inputElements[i].value;

    break;

    }

 }

localStorage.setItem("userGender", checkedValue);

window.location = "response.htm";

}

document.getElementsByName("doIt")[0].onclick = doIt;

<!--Response page-->

<script>

  document.write("Gender:"+localStorage.getItem("userGender"))

</script>

Answer 1

您需要为单选按钮设置value属性，例如<ol>&nbsp; <li>&nbsp; &nbsp; <input type="radio" **value="female"** id="female" name="gender" checked/>&nbsp; &nbsp; &nbsp; <label class="gender" for="female">Female</label>&nbsp; </li>&nbsp; <li>&nbsp; &nbsp; <input type="radio" id="male" **value="male"** name="gender" />&nbsp; &nbsp; <label class="gender" for="male">Male</label>&nbsp; </li></ol>当单选按钮或复选框被选中/选中时，该值指定返回值。