logo标签列表

使用JS获取单选按钮的值

javascripthtmlradio-button
7
问题：我无法获取单选按钮或文本框中的值。
经过试错，我发现以下代码可以让我访问gender1 div中的信息。
我无法弄清如何获取性别或年龄的值。我尝试使用id属性附加.value/.value()，等等。我还尝试了相关问题在stackoverflow上的各种方法（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>

3个回答
9
你可以使用。
document.querySelector('input[name="gender"]:checked').value

获取数值。

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.")
   }
});
<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>

谢谢Deep！然而，在测试这个答案时，似乎需要选择其中一个单选按钮，否则它将返回null。我的说法正确吗？ - user2657817
1
@user2657817 有关系吗？因为当页面加载时，单选按钮将不会被选中...请注意，Deep在#r2中有一个checked属性... - kukkuz
@user2657817，我刚刚修改了代码片段，让用户先选择值，然后再打印列表。由于之前的代码片段在页面加载时就打印了值，所以我在HTML中放置了一个checked属性，就像kukkuz解释的那样。 - Deep
1
@user2657817 更新了代码片段，用于简单验证用户是否提供了年龄和性别的值。 - Deep
由于这是一个纯JavaScript解决方案，它将适用于所有现代浏览器。 - Deep
显示剩余2条评论
2

您可以使用 querySelector 来选择文本框的value或checked单选按钮的value，如下所示：

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

请见下面的演示： 

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);

}
<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>

如果在同一页上有多个选项，他会发生什么情况？ - Ataur Rahman Munna
Ataur Rahman Munna，我认为你可以使用“name”参数而不是“type”，以便获取单选按钮的值。 - user2657817
kukkuz，感谢您的评论。您有什么建议来解决用户在未提供输入的情况下点击 Click me 的情况吗？ - user2657817
1
然后，当答案更加具体时，您可以更新您的回答。 - Ataur Rahman Munna
@user2657817，您可以添加一些验证... Deep已经在他的答案中加入了这个，我想... - kukkuz
2
您可以使用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>

或者

<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>

希望上述例子对您有所帮助。
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接