如何使用單選和復選框按鈕來驗證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

如果您想驗證單選按鈕，請執行以下操作

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

Answer 3

這是我要對您的代碼執行的操作以及原因：

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

• 重復標識符而不是名稱時，請使用類。 名稱對於表單提交之類的名稱應該是唯一的。 name="buttonModePaiement"應該是class="buttonModePaiement" 。

• 將事件附加在JS代碼中，而不是內聯。 請注意，我刪除了onclick="validCommande();" 從您的鏈接添加到DOM ready事件中。

• 您不需要（也不應該）與“ undefined”進行比較。 這就足夠了(paiement == "undefined") ---> (!paiement)

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