Question

我正在尝试弹出一个窗口来显示输入到表单中的内容。我设法让它显示输入到表单中的名称，但也希望它仅使用JavaScript和HTML显示网站中给出的评级（单选按钮）。

<form>
<fieldset>
<legend><b>Details</b></legend>

<label>First Name </label><input id = "fname" type="text" autofocus="" placeholder="Enter first name" name = "fname"><br><br>
<label>Last Name </label><input type="text" placeholder="Enter last name"><br><br>
<label>Email </label><input type="email" placeholder="Enter valid email">  <button onclick="myFunction()">Help</button><br><br>

</fieldset>

<fieldset>
<legend><b>Rating</b></legend>

<label>Website Rating:</label>
 <input type="radio" name="Rating" value="1">* &#40;1 Star&#41;
 <input type="radio" name="Rating" value="2">* * &#40;2 Star&#41;
 <input type="radio" name="Rating" value="3">* * * &#40;3 Star&#41;
 <input type="radio" name="Rating" value="4">* * * * &#40;4 Star&#41;
 <input type="radio" name="Rating" value="5">* * * * * &#40;5 Star&#41;<br>

</fieldset>

<fieldset>
<legend><b>Comments</b></legend>

<label>Comments on the website:</label>
<textarea name="feedback1" rows="8" cols="70"></textarea><br>

</fieldset>

<fieldset>
<legend><b>Updates</b></legend>
Do you want to receive updates via Email?<br>
<input type="checkbox" name="updateYes" value="Yes">Yes 
<input type="checkbox" name="update" value="No" checked>No<br>
</fieldset>

<input type="reset" value="Reset">
<button onclick="myFunction2()" type = "submit">Submit</button>

</form>

<script>
function myFunction() {
    alert("Please enter a valid Email adress into the 'Email' field");
}

function myFunction2() {
    alert("Thank you for your feedback " + document.getElementById('fname').value + ", You have rated the website ");
}
</script>

</body>
</html>

Answer 1

您可以使用querySelector：

var value = document.querySelector('input[name=Rating]:checked').value;
alert("Thank you for your feedback " + value + ", You have rated the website ");

示例：http://jsfiddle.net/bvaughn/kaqqsrc1/

您也可以使用getElementsByName：

var value;
var radios = document.getElementsByName("Rating");
for(var i = 0; i < radios.length; i++) {
    if(radios[i].checked) value = radios[i].value;
}

示例：http://jsfiddle.net/bvaughn/1qqqtafu/

Answer 2

通过循环获取所选单选按钮：

function myFunction2() {

  var checkedRadioButton, inputs, rating;

  inputs = document.getElementsByName("Rating");
  for (var i = 0; i < inputs.length; i++) {
    if (inputs[i].checked) {
        checkedRadioButton = inputs[i];
        break;
    }
  }   

  if (checkedRadioButton) {
      rating = checkedRadioButton.value;
  }

  alert("Thank you for your feedback " + document.getElementById('fname').value + ", You have rated the website " + rating);

}

https://jsfiddle.net/d5jo235p/

阅读JS中的单选按钮选择

2 个答案: