的jQuery

Question

尝试执行简单的表单验证预提交，仅用于UX增强目的。我遇到的问题是.val()只返回第一个表单字段值而忽略其余值。

的jQuery

        $('#pForm').submit(function(){
            var print = $(".option:checked").val();
            var design = $(".option:checked").val();
            var error = "Please select a design service...";

            if(print == 'p10','p20','p30','p40','p90','p00'
            && design == 'd10','d20','d30','d40','d00') {

               alert(print);
               alert(design);

               return true;

            } else {

               alert(error);
               return false;

            }

        });

HTML（示例代码）

每个收音机都标有以下内容：

<label><input type="radio" name="design" class="option" data-number="<?php echo $var ?>" value="d40"/></label>
<label><input type="radio" name="design" class="option" data-number="<?php echo $var ?>" value="d30"/></label>
<label><input type="radio" name="design" class="option" data-number="<?php echo $var ?>" value="d20"/></label>

<label><input type="radio" name="print" class="option" data-number="<?php echo $var ?>" value="p40"/></label>
<label><input type="radio" name="print" class="option" data-number="<?php echo $var ?>" value="p30"/></label>
<label><input type="radio" name="print" class="option" data-number="<?php echo $var ?>" value="p20"/></label>

最终结果是我不希望表单提交，除非从打印无线电字段中选择一个值＆amp;＆amp;设计无线电领域。如果检查失败，我想向用户显示error消息。

*上面的一些代码可能是半伪感谢您的帮助！：）

Answer 1

好了，既然你要做的更清楚了，那就这样做，以确保在每个组中都检查了一个项目：

if (!$(".design:checked").length || !$(".print:checked").length) {
   // something is not selected
}

确保两者中都有选定值后，您可以获取使用此代码检查的第一个项目的值：

 var print = $(".print:checked").val();
 var design = $(".design:checked").val();

Answer 2

value（）始终只返回第一个元素的值。 http://api.jquery.com/val/

使用map查看此问题以获得一个好的解决方案： Getting array of values from jQuery object

Answer 3

你很亲密。试试这个。

if((print == '') || (design == '')) {

       //error 
}

jQuery .val（）只返回表单中的第一个值？如何获得所有价值？

的jQuery

HTML（示例代码）

3 个答案: