javascript - 如何使用 javascript 检查单选按钮

Question

这是我在 html 中的代码：

<input type="radio" name="sex" id="boy" value="male" /> Boy<p></p><br>
<input type="radio" name="sex" id="girl" value="female" />Girl
<button id="fine" type="button">Submit</button>

这是在我的 javascript 文件中：

  var maskio = document.getElementById('boy');
  var femmna = document.getElementById('girl');
  function prima(){
   var fine = document.getElementById('fine');
   fine.onclick=chek;
  }
  function chek(){
  if((maskio.checked == false) && (femmna.checked == false)) {
    alert('lol');
    return false;
   }
  }
window.onload=prima;

哪里有问题？当我运行它并单击提交时，没有任何反应。为什么？

Answer 1

如下更改您的 JS。这些元素在您获取它们时尚未创建。

function prima() {
    var fine = document.getElementById('fine');
    fine.onclick = chek;
}

function chek() {
    var maskio = document.getElementById('boy');
    var femmna = document.getElementById('girl');
    if ((maskio.checked == false) && (femmna.checked == false)) {
        alert('lol');
        return false;
    }
}

window.onload=prima;

在这里检查：jsFiddle

Answer 2

问题是你的html标签，有一个空格“<”删除空格，它会正常工作......

<input type="radio" name="sex" id="boy" value="male" /> Boy
<p></p><br>
<input type="radio" name="sex" id="girl" value="female" /> Girl
<button id="fine" type="button">Submit</button>
<script>

var maskio = document.getElementById('boy');
var femmna = document.getElementById('girl');
function prima()
{
    var fine = document.getElementById('fine');
    fine.onclick=chek;
}
function chek()
{
    if(maskio.checked)
    {
        alert("You are male Eh?");
    }
    else if(femmna.checked)
    {
        alert("Femal ;)");
    }
    else if(!maskio.checked && !femmna.checked)
    {
        alert("Come on Please check something!");
    }
}
   window.onload=prima;

</script>

Answer 3

当单选按钮具有相同的名称时，它们属于该名称的组。这意味着，只能选择组中的一个单选按钮。如果你两个都检查，无论如何都不会有结果！