Question

问题：我无法在文本框中获取单选按钮或值的值。

通过反复试验，我发现以下内容可让我访问div gender1

中的信息

我无法弄清楚如何获得性别或年龄的价值。我尝试使用id属性等附加.value / .value（），我还尝试了关于堆栈溢出（Get Radio Button Value with Javascript）的相关问题的各种方法，但收效甚微。

var checkedRadio = document.querySelectorAll('.w3-container')[0]
                        .querySelectorAll('#box')[0]
                     .querySelector('#gender1');

console.log( checkedRadio );

<body>
  <div class="w3-container">
    <div id="box" style="width:600px;height:650px;padding:10px;border:2px solid black;">
      <h5><b>Age (years):</b></h5>
      <div id="age">
        <input type="number" name="age1">
        <br>
      </div>
      <div id="gender1">
        <h5><b>Male or Female?</b>:
                    <input type="radio" id="r1" name="gender" value="Male"> Male
                    <input type="radio" id="r2" name="gender" value="Female"> Female
                </h5>
      </div>
    </div>
  </div>
</body>

Answer 1

你可以使用

document.querySelector('input[name="gender"]:checked').value

获得价值。

＆＃13;

document.getElementById("btn_click").addEventListener("click", function(){

  
  if(document.querySelector('input[name="age1"]').value !== "" && document.querySelector('input[name="gender"]:checked') !== null )
  {
  console.log("Age : ", document.querySelector('input[name="age1"]').value);
  console.log("Gender : ", document.querySelector('input[name="gender"]:checked').value);
   }
  else
  {
    console.log("Please provide all the details.")
   }
});

＆＃13;

<body>
  <div class="w3-container">
    <div id="box" style="width:600px;height:650px;padding:10px;border:2px solid black;">
      <h5><b>Age (years):</b></h5>
      <div id="age">
        <input type="number" name="age1">
        <br>
      </div>
      <div id="gender1">
        <h5><b>Male or Female?</b>:
                    <input type="radio" id="r1" name="gender" value="Male" > Male
                    <input type="radio" id="r2" name="gender" value="Female"> Female
                </h5>
      </div>
      <input type="button" id="btn_click" value="Click">
    </div>
  </div>
</body>

＆＃13;

Answer 2

您可以使用 querySelector 选择已检查单选按钮的文本框值或值，如下所示：

var age = document.querySelector('input[type=number][name=age1]').value;
var gender = document.querySelector('input[type=radio]:checked').value;

见下面的演示：

＆＃13;

function submit() {

  var age = document.querySelector('input[type=number][name=age1]').value;
  var gender = document.querySelector('input[type=radio]:checked').value;

  console.log(age, gender);

}

＆＃13;

<div class="w3-container">
  <div id="box" style="width:600px;height:650px;padding:10px;border:2px solid black;">
    <h5><b>Age (years):</b></h5>
    <div id="age">
      <input type="number" name="age1">
      <br>
    </div>
    <div id="gender1">
      <h5><b>Male or Female?</b>:
                    <input type="radio" id="r1" name="gender" value="Male"> Male
                    <input type="radio" id="r2" name="gender" value="Female"> Female
                </h5>
    </div>
  </div>
</div>

<button onclick="submit()">Click me</button>

＆＃13;

Answer 3

您可以使用javascript onclick事件。请看下面的例子，

<script>
function getGender(gender) {
  alert(gender);
}
</script>    
<body>
        <div class="w3-container">
            <div id="box" style="width:600px;height:650px;padding:10px;border:2px solid black;">
                <h5><b>Age (years):</b></h5>
                <div id="age"><input type="number" name="age1"><br></div>
                <div id="gender1">
                    <h5><b>Male or Female?</b>:
                        <input type="radio" id="r1" name="gender" onclick = "getGender(this.value)" value="Male"> Male
                        <input type="radio" id="r2" name="gender" onclick = "getGender(this.value)" value="Female"> Female
                    </h5>
                </div>
            </div>
        </div>
        </body>

OR

<script>
function getValues() {
  // Get value of selected radio button
  var genderVal;
  if (document.getElementById('r1').checked) {
    genderVal = document.getElementById('r1').value;
  } else if (document.getElementById('r2').checked) {
    genderVal = document.getElementById('r2').value;
  }

  alert("Value of textbox:"+ document.getElementsByName("age1")[0].value+" Value of radio button:"+ genderVal);
}
</script>

<body>
  <div class="w3-container">
    <div id="box" style="width:600px;height:650px;padding:10px;border:2px solid black;">
          <h5><b>Age (years):</b></h5>
          <div id="age"><input type="number" name="age1"><br></div>
          <div id="gender1">
            <h5><b>Male or Female?</b>:
              <input type="radio" id="r1" name="gender" onclick = "getGender(this.value)" value="Male"> Male
              <input type="radio" id="r2" name="gender" onclick = "getGender(this.value)" value="Female"> Female
            </h5>
          </div>
          <div>
            <input type="button" value="GetValues" onclick="getValues()">
          </div>
        </div>
      </div>
</body>

希望上面的例子对你有所帮助。

使用JS获取Radiobutton的价值

3 个答案: