javascript - 从多组单选按钮捕获值

Question

我认为这个很简单，但我确实需要一些帮助。感谢任何提供帮助的人!!

我正在 try catch 来自两组单选按钮的输入。第一组有效，但第二组无效。

这是我的代码:

HTML

<p>Please select one from each group.</p>

<form action="#">

    <fieldset>
      <input type="radio" name="type" value="classic">classic type<br>
      <input type="radio" name="type" value="modern">modern type<br>
      <br>
      <input type="button" onclick="typeface()" value="Review type selection">
      <br><br>
      <input type="text" id="type" size="50">
    </fieldset>

    <fieldset>
      <input type="radio" name="layout" value="layout1">layout1<br>
      <input type="radio" name="layout" value="layout2">layout2<br>
      <br>
      <input type="button" onclick="layout()" value="Review layout selection">
      <br><br>
      <input type="text" id="layout" size="50">   
    </fieldset>

    <input type="submit" value="Submit">

</form>

JS(之前 </body> )

function typeface(){
  var type = document.forms[0].type;
  var txt = "";
  var i;
  for (i=0;i<type.length;i++){
    if (type[i].checked){
      txt = txt + type[i].value + " ";
    }
  }
  document.getElementById("type").value = "You selected: " + txt;
}

function layout(){
  var layout = document.forms[0].layout;
  var txt = "";
  var i;
  for (i=0;i<layout.length;i++){
    if (layout[i].checked){
      txt = txt + layout[i].value + " ";
    }
  }
  document.getElementById("layout").value = "You selected: " + txt;
}

Answer 1

不要通过确认他们的 radio 选择来激怒用户，而是执行以下操作:

<强> DEMO

HTML

<form id="myForm" action="#">

  <fieldset>
    <input type="radio" name="type" value="classic">classic type<br>
    <input type="radio" name="type" value="modern">modern type<br>
    <br>
    <input type="text" id="type" size="50">
  </fieldset>

  <fieldset>
    <input type="radio" name="layout" value="layout1">layout1<br>
    <input type="radio" name="layout" value="layout2">layout2<br>
    <br>
    <input type="text" id="layout" size="50">
  </fieldset>
  <input type="submit" value="Submit">

</form>

JS:

function getId(id){ return document.getElementById(id); }
function writeVal(){
  getId(this.name).value = "You selected: "+this.value;
}

var radio = getId('myForm').querySelectorAll('input[type=radio]');
for(var i=0; i<radio.length; i++) radio[i].onchange = writeVal;

以上内容将立即在单选change中起作用，并在text字段中显示所选的文本值。