将单选按钮的值设置为文本输入

此代码示例将引导您完成所询问的内容。 它将涵盖您的问题涉及的每个主题，包括：

• 收集文档中的元素
• 附加事件侦听器
• 在作用域中使用this
• 获取和设置<input>元素的值

每个主题的详细说明作为注释包含在下面的相应代码旁边。

/*jslint browser:true*/
(function(doc) {
  "use strict";
  // This will be all of our logic for our program
  function main() {
    // Define our vars
    var output, radios;
    /*
     * Now we need to collect the elements that we are going use
     * We do that with documnet.getElementById() if the element
     * has an id attribute that we know of.  We can also use
     * the querySelecter family to find elements with explicit
     * ids.  For example, we are going to look for all inputs whose
     * type property is "radio", that means we get all the
     * radio inputs in the document.
     */
    // Find the input named "output" in our document
    output = doc.getElementById("output");
    // Get the radio inputs in our document
    radios = doc.querySelectorAll("input[type='radio']");
    // This function will set the value of the output element
    function printValue() {
      /*
       * An important thing to note is that you have access to
       * "output" here.  The output variable was captured and is
       * available in this funciton's scope.
       *
       * The other thing is that the "this" variable, in this
       * instance, will be set to the radio button that the
       * change event listener is attached to.
       */
      // Make sure that this is the "checked" radio button
      if (this.checked) {
        // Set the "output" input's value to this radio's value
        output.value = this.value;
      }
    }
    // This is just a functor to use with the Array.prototype.forEach()
    function setupRadio(radio) {
      /*
       * Here we actually attach the change event listener
       * That means that whenever the radio changes, it will call
       * the function that we attached.
       *
       * The nice thing about addEventListener() is that whenever
       * it calls your function, it sets the scope to whatever the
       * listener was attached to.
       *
       * In other words, it calls "printValue" and sets the "this"
       * variable to radio.  because of that, you have access to
       * all of radio's properties without having to explicitly
       * pass the radio to the printValue function.
       */
      // Attach the change listener
      radio.addEventListener("change", printValue);
    }
    /*
     * NodeLists don't have a forEach method, so we borrow Array's
     * This lets us iterate over all of the radios that we selected
     * and call "setupRadio" on each one.
     */
    Array.prototype.forEach.call(radios, setupRadio);
  }
  // Here we wait for the document to finish loading then call the "main" function
  doc.addEventListener("DOMContentLoaded", main);
}(document));

main {
  font-family: sans-serif;
}
fieldset {
  padding: 0;
  border: 0;
}
ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

<main>
  <label for="output">Current Radio Value</label>
  <input id="output" type="text">
  <fieldset>
    <legend>Radio Choices</legend>
    <ul>
      <li>
        <label>
          <input type="radio" name="which" value="First">
          <span>First</span>
        </label>
      </li>
      <li>
        <label>
          <input type="radio" name="which" value="Second">
          <span>Second</span>
        </label>
      </li>
    </ul>
  </fieldset>
</main>