如何使用单选和复选框按钮验证javascript验证

How to validate a javascript validation with radio and checkbox button?

本文关键字：验证 按钮 javascript 复选框 何使用 单选      更新时间：2023-09-26

在一个网店上，我需要检查用户是否检查了这个支付选择，以及他是否检查了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'));
}

当单选按钮和复选框没有被选中时，我得到两个警告消息:"undefined"answers"false"(所以这是正确的)。

但是当我选中复选框而没有单选按钮时，我得到的是:"on"answers"true"。

为什么?

我想这就是你想要的

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" />

我会对你的代码做些什么，以及为什么:

<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/

如果要验证单选按钮，则按以下方式执行

<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;
}
相关文章：