Как проверить проверку 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')); 

} 

когда RadioButton и флажок не установлен, я получаю два предупредительное сообщение: "не определено" и "ложь" (так что это правильно).

Но когда я проверяю флажок и нет радиообъектива, я получаю его: «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')); 
} 

• Использовать классы при повторении идентификатора iers, а не имена. Имена должны быть уникальными для таких вещей, как подача формы. name="buttonModePaiement" должно быть class="buttonModePaiement".

• Добавить события в JS-код, а не в строку. Заметьте, что я удалил onclick="validCommande();" из вашей ссылки и добавил ее в событие готовности DOM.

• Вам не нужно (и не должно) сравнивать с «неопределенным». Этого будет достаточно (paiement == "undefined") --->(!paiement)

Работа скрипки: http://jsfiddle.net/hMdKT/3/

Answer 3

если и хочет проверить радио-кнопку сделать так

<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; 
}