如何使用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

當單選按鈕具有相同的名稱時，它們屬於該名稱的組。 這意味着只能選擇一個單選按鈕。 如果同時選中兩者，則不會有任何結果！