Question

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
<script>
function myGender() {
  if (document.querySelector('input[name="gender"]:checked').value==null) {
    document.getElementById('demo').innerHTML = "Please select your gender";
  } else {
    document.getElementById('demo').innerHTML = document.querySelector('input[name="gender"]:checked').value;
  }
}

</script>
</head>
<body>
      <label for="gender"> Gender: </label> <br>
      <input type="radio" name="gender" value="man"> man<br>
      <input type="radio" name="gender" value="woman" >woman<br>
      <input type="radio" name="gender" value="Other" >Other<br>
      <button onclick="myGender()">What am I?</button>
     <p id="demo"></p>
</body>
</html>

https://jsfiddle.net/vykptm5x/

我希望它说如果我没有选择性别，我不想默认选中它。它仍然在控制台中说它是null，但我有if语句。

非常感谢你：）

Answer 1

您需要检查是否已经检查过任何内容。

发生错误是因为，因为没有选中任何内容，所以querySelector返回null。

var checkedThingy = document.querySelector('input[name="gender"]:checked');
  if (!checkedThingy) {
    document.getElementById('demo').innerHTML = "Please select your gender";
  }

https://jsfiddle.net/n516njaw/

Answer 2

您想检查是否

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

是null，如果它的值为null，则不是。尝试访问该值将导致错误，因为value是空对象的属性。

只需使用控制台调试器，您就会自己看到

Answer 3

如果未检查该值，则为false。

所以你需要检查所有单选按钮，如果全部都是假的，那么建议选择性别。

function myGender() {
  /* gender=document.querySelector('input[name="gender"]:checked').value; */
  //if (document.querySelector('input[name="gender"]:checked').value==null) {
  if ( ![].slice.call(document.querySelectorAll('input[name="gender"]')).reduce(function(p,input) { p = p || input.checked; return p; },'') ) {
    document.getElementById('demo').innerHTML = "Please select your gender";
  } else {
    document.getElementById('demo').innerHTML = document.querySelector('input[name="gender"]:checked').value;
  }
}

<body>
      <label for="gender"> Gender: </label> <br>
      <input type="radio" name="gender" value="man"> man<br>
      <input type="radio" name="gender" value="woman" >woman<br>
      <input type="radio" name="gender" value="Other" >Other<br>
      <button onclick="myGender()">What am I?</button>
     <p id="demo"></p>
</body>

JS：取决于value是否为null，做不同的事情

3 个答案: