jquery電臺：檢查是不按預期工作

Question

我正在學習jquery。我已經做了一個簡單的HTML文件，在jquery中進行了小小的驗證，但他們的行爲不正確。問題是：

如果先輸入名稱，然後選擇複選框，一切似乎工作正常。

但是，如果我先選擇性別然後輸入姓名，它會一直提醒我選擇性別。 代碼的實現方式是否存在問題？

<script src="jquery.js"></script> 
<script> 
    $(document).ready(function() { 
     $("#Name").focus(); 
     $("#target").submit(function() { 
      var fn = $("#Name").val(); 
      if (fn == "" && fn.length == 0) { 
       alert('Name is mandatory'); 
       $("#Name").focus(); 
       return false; 
      } 
      var status = false; 
      $("#gender").each(function() { 
       if ($(this).is(":radio:checked")) { 
        status = true; 
       } 
      }); 
      if (!status) { 
       alert("Select Gender"); 
       $("#gender").focus(); 
       return false; 
      } 
      return true; 
     }); 
    }); 
</script> 
<form id='target' action='MyResult.html'> 
    First Name: 
    <input type='text' name='Name' id='Name' /> 
    <br/>Gender: 
    <input type='radio' name='gender' id='gender' value='male' />Male 
    <input type='radio' name='gender' id='gender' value='female' />Female 
    <br/> 
    <input type='submit' value='Registration' /> 
</form> 

Answer 1

ID必須是唯一的。您可以使用Attribute value selector結合:checked來過濾是否選中單選按鈕。

var status = $(":radio[name=gender]:checked").length > 0; 

代替

var status = false; 
$("#gender").each(function() { 
    if ($(this).is(":radio:checked")) { 
     status = true; 
    } 
}); 

DEMO