Question

如何使用javascript或jquery获取以下条件验证：

如果我选择“是”，我就是素食主义者......我必须选择一个素食者如果我选择“否”，我不是素食者。我必须选择非素食者

<div>
<input name="Vegetarian" type="radio" value="1">Yes
<input name="Vegetarian" type="radio" value="0">No
</div>
..
<input name="Veggie" type="radio" value="veggieburger">Veggie Burger
<input name="Veggie" type="radio" value="fruit">Fruit
<input name="Veggie" type="radio" value="tofu">Tofu
<input name="Veggie" type="radio" value="salad">Salad
...
<input name="NonVeggie" type="radio" value="hamburger">Hamburger
<input name="NonVeggie" type="radio" value="chicken">Chicken
<input name="NonVeggie" type="radio" value="fish">Fish
<input name="NonVeggie" type="radio" value="turkey">Turkey

Answer 1

只是在没有尝试任何事情的情况下寻求解决方案不会在这里得到很多回应。所以不会为你工作。

我会指出你正确的方向。

当您单击第一个组时，可以使用onClick事件启用/禁用一组单选按钮，强制用户从正确的组中选择一个条目。

查看jQuery网站上的文档 - 实际上很容易掌握。

.click() - jQuery API Selectors - jQuery API

Answer 2

我相信你想根据素食选项选择显示/隐藏这些选项。试试这个。

$('input[name=Vegetarian]').click(function(){
    $('input[name=Veggie]').parent().toggle(this.value == "1");
    $('input[name=NonVeggie]').parent().toggle(this.value != "1");
});

Answer 3

要验证相应的食物，请尝试以下方法：

var name = $('input[name=Vegetarian]').val() == '1' ? 'Veggie':'NonVeggie';

return $('input[name='+ name +']').is(':checked');

Answer 4

试试这个：

$("#submit").click(function() {
    var isVegetarian = $("input[name='Vegetarian']:checked").val() == "1";

    if (isVegetarian && $("input[name='Veggie']:checked").length == 0) {
        alert("Please select a vegetarian option");
    }
    else if (!isVegetarian && $("input[name='NonVeggie']:checked").length == 0) {
        alert("Please select a non-vegetarian option");
    }
});

Example fiddle

如果您的网站中有各种表单，我建议使用jQuery validate。如果这种形式是一次性的，那么这种方法就足够了。

Answer 5

您可以使用jQuery form validation，

jQuery("#id_of_form").validate({
        rules: {
           "Veggie": {
                required : function(element){
                    return $("input[name='Vegetarian']:checked").val() == "1"
                }
            },
            "NonVeggie": {
                required : function(element){
                    return $("input[name='Vegetarian']:checked").val() == "0"
                }
            }
        }
});

Javascript或Jquery验证一组单选按钮？

5 个答案: