使用JS获取Radiobutton的价值

use*_*817 5 html javascript radio-button

问题:我无法在文本框中获取radiobutton或值的值.

通过反复试验,我发现以下内容让我可以访问div gender1中的信息

我无法弄清楚如何获得性别或年龄的价值.我尝试使用id属性等附加.value/.value(),我还尝试了堆栈溢出相关问题的各种方法(使用Javascript获取单选按钮值),但收效甚微.

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

console.log( checkedRadio );
Run Code Online (Sandbox Code Playgroud)
<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>
Run Code Online (Sandbox Code Playgroud)

Dee*_*eep 8

您可以使用

document.querySelector('input[name="gender"]:checked').value
Run Code Online (Sandbox Code Playgroud)

以获得价值。

document.querySelector('input[name="gender"]:checked').value
Run Code Online (Sandbox Code Playgroud)
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.")
   }
});
Run Code Online (Sandbox Code Playgroud)