jQuery 验证以确保至少一个单选按钮值为真答案

【问题标题】：jQuery validation to ensure that at least one radiobutton value is truejQuery 验证以确保至少一个单选按钮值为真
【发布时间】：2023-03-18 22:20:01
【问题描述】：

我的表格有两个问题。第一个问题询问产品价值是否大于固定的一定金额，第二个问题询问产品价值是否小于固定金额。当用户尝试提交表单时，应验证表单以确认至少一个问题已被回答为是。如果两个问题都回答为否，则表单有效属性$("#form").valid() 应为 false，并且页面上应显示包含错误消息的 div。如何使用 jQuery 验证来实现这一点？

表单的简化版本看起来像

<form id="billing" method="POST">
    <div>
        <label for "billAmountLess">Value is less than 1000</label>
        <input id="billAmountLessY" name="billAmountLess" type="radio" required value="True">
        <label for "billAmountLessY">Yes</label>
        <input id="billAmountLessN" name="billAmountLess" type="radio" required value="False">
        <label for "billAmountLessN">No</label>
    </div>
    <div>
        <label for "billAmountMore">Value exceeds 1000</label>
        <input id="billAmountMoreY" name="billAmountMore" type="radio" required value="True">
        <label for "billAmountMoreY">Yes</label>
        <input id="billAmountMoreN" name="billAmountMore" type="radio" required value="False">
        <label for "billAmountMoreN">No</label>
    </div>
    <div id="errorDiv" style="display:none">Error!!!!
    </div>
    <div>
        <input type="submit" value="Submit">
    </div>
</form>

我正在尝试的 jQuery 验证是

$('#billing').validate({
    rules: {
        billAmountMore: {
            equalTo: {
                param: '#billAmountMoreY',
                depends: function(element) {
                    $("errorDiv").show();
                    return $("#input[name='billAmountLess']:checked").val() == "false"; 
                }
            }
        }
    }
});

我为此创建了一个jsfiddle。

【问题讨论】：

为什么你必须创建两个问题，每个问题都有两个选项，而且所有这些都是相关的？我只想放一个复选框，指示它是否超过 1000。这背后有什么技术原因吗？
我同意在这种情况下它没有多大意义。我在这里简化了问题。但是根据我们的要求，我们确实需要两组问题。就像，用户可以拥有超过限制的东西或低于限制的东西，或者满足这两个标准的多个东西。但用户不能同时选择。我们在后端检查它以执行一些操作。

标签： javascript jquery html validation jquery-validate

【解决方案1】：

您可以使用此代码

    function validate(){
        console.log($("input[name='billAmountLess']:checked").val());
        console.log($("input[name='billAmountMore']:checked").val());
    }

检索单选按钮值。

在你的代码中这一行：

return $("#input[name='billAmountLess']:checked").val() == "false";

应该删除“输入”之前的“#”，因为它表示元素的“id”。也许这就是它不起作用的原因。

【讨论】：

【解决方案2】：

很简单，您可以在自定义验证功能中执行此操作。更新您的表单标签 -

<form id="billing" onsubmit="return validate();" method="POST">

那么——

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript">
  function validate(){
    var billLess = $("input[name='billAmountLess']:checked").val();
    var billMore = $("input[name='billAmountMore']:checked").val();
    if(billLess == "False" && billMore == "False"){
      $("#errorDiv").show();
      return false;
    }
    else{
      return true;
    }
  }
</script>

【讨论】：