如何使用无线电和复选框按钮验证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; 
}