如何使用無線電和複選框按鈕驗證javascript驗證？

Question

在網上商店，我需要檢查用戶是否檢查了此付款選項，以及他是否檢查了CGU規則。

所以這是我的HTML：

<div id="choixPaiement"> 
     <div class="choixDuReglement"> 
     <ul> 
      <li><input type="radio" name="buttonModePaiement" value="tata"></li> 
      <li><input type="radio" name="buttonModePaiement" value="toto"></li> 
      <li><input type="radio" name="buttonModePaiement" value="titi"></li> 
      <li><input type="radio" name="buttonModePaiement" value="tutu"></li> 
     </ul> 
     </div> 
     <div id="accepte_cgv"> 
     <p> <input type="checkbox" name="check_cgv" id="check_cgv"><label>Lu et approuvé</label></p> 
     <p><a onclick="validCommande();" class="btnValidCommande" href="javascript:;"><span>Valid my order</span></a></p> 
     </div> 
    </div> 

這是我的javascript：

function validCommande(){ 
    var paiement = $("input[@name=buttonModePaiement]:checked").val(); 
    alert(paiement); 
    if(paiement == "undefined"){ 
    alert('please choose payment method');  
    } 
    alert($('#check_cgv').is(':checked')); 

} 

時不檢查單選按鈕和複選框，我得到兩個警告信息： 「未定義」 和 「假」 （所以這是正確的）。

但是，當我檢查複選框，沒有單選按鈕時，我得到它：「on」和「true」。

爲什麼？

Answer 1

我想這是你想要的

function validCommande() { 
    var paiement = $("input[name='buttonModePaiement']:checked"); 

    if(paiement.length === 0) 
     alert('please choose payment method');  
    else 
     alert(paiement.val()); 

    alert($('#check_cgv').is(':checked')); 
} 

此外，你不關閉輸入標籤：

<input type="radio" name="buttonModePaiement" value="tata" /> 

Answer 2

這裏是我會做你的代碼，爲什麼：

<div id="choixPaiement"> 
     <div class="choixDuReglement"> 
     <ul> 
      <li><input type="radio" class="buttonModePaiement" value="tata"></li> 
      <li><input type="radio" class="buttonModePaiement" value="toto"></li> 
      <li><input type="radio" class="buttonModePaiement" value="titi"></li> 
      <li><input type="radio" class="buttonModePaiement" value="tutu"></li> 
     </ul> 
     </div> 
     <div id="accepte_cgv"> 
     <p> <input type="checkbox" name="check_cgv" id="check_cgv"><label>Lu et approuvé</label></p> 
     <p><a id="btnValidCommande" href="#"><span>Valid my order</span></a></p> 
     </div> 
</div> 

$(document).ready(function(){ 
    $('#btnValidCommande').click(function(e){ 
     e.preventDefault(); // stop the link from trying to navigate 
     validCommande(); 
    }); 
}); 

function validCommande() { 
    var paiement = $(".buttonModePaiement:checked").val(); 

    if (!paiement) { 
     alert('please choose payment method'); 
    } 
    alert($('#check_cgv').is(':checked')); 
} 

• 重複IDENTIF時使用類iers，而不是名字。名稱應該是唯一的表單提交的東西。 name="buttonModePaiement"應該是class="buttonModePaiement"。

• 在JS代碼中追加你的事件，而不是內聯。注意我從鏈接中刪除了onclick="validCommande();"並將其附加到DOM準備好的事件中。

• 你不需要（也不應該）比較「未定義」。這將足以(paiement == "undefined") --->(!paiement)

工作小提琴：http://jsfiddle.net/hMdKT/3/

Answer 3

如果u想驗證單選按鈕做這樣

<form name="as" method="post" action="n.php"> 
<input type="radio" id="x1" name="red"> 
<input type="radio" id="x2" name="red"> 
<input type="radio" id="x3" name="red"> 
<input type="radio" id="x4" name="red"> 

<input type="submit" value="button" onclick="return xyz()"> 
</form> 

    function xyz() 
{ 
    var x = document.getElementsByName("red"); 
    for (var i=0; i<x.length; i++) 
    { 
     if (x[i].checked) { 
      return true; 
     } 
    } 
    // No radio button checked, return false. 
    alert("hello"); 
    return false; 
}