Question

我必须做5个单选按钮，每个按钮的值都是10,15,20,25,30

（所以第一个收音机是10，第二个是15等）

如果单击单选按钮，则应在文本输入中显示该值。我真的不知道该怎么做。有一点，我真的需要留下java和html ......嘿。另外，我的老师要求我使用'this'这个对象（我从未使用'this'这个对象）这是我的代码，谢谢！：

Java：

(function(){

var oForm = document.forms;

oForm[0].querySelector("input[type='radio']").
                                    addEventListener("click",
                                                                    sommeButton,
                                                                    false);

}) ()

function sommeButton () {

var aButton = document.forms[0].r1;

}

和html：

<html>
<head>
<meta charset="UTF-8">
<title>Exercise 5</title>
<link rel="stylesheet" href="css/form.css" />
</head>
<body>
                <section>
            <form name="frm1">
                <label>
                    <input type="radio" 
                    value="1" 
                    name="r1" />
                </label>

                <label>
                    <input type="radio" 
                    value="2" 
                    name="r1" />
                </label>

                <label>
                    <input type="radio" 
                    value="3" 
                    name="r1" />
                </label>

                <label>
                    <input type="radio" 
                    value="4" 
                    name="r1" />
                </label>

                <label>
                    <input type="radio" 
                    value="5" 
                    name="r1" />
                </label>

                <label>
                    <input type="text" name="tEx2" />
                </label>
            </form>
        </section>

</body>
</html>

Answer 1

此代码示例将引导您完全了解您的要求。它将涵盖您的问题涉及的每个主题，包括：

收集文档中的元素
附加事件侦听器
在范围内使用<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>

{{1}}

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

1 个答案: