javascript - jQuery .val() 只返回表单中的第一个值？如何获取所有值？

Question

仅出于增强用户体验的目的尝试执行简单的表单验证预提交。我遇到的问题是 .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(示例代码)

每个 radio 标记如下:

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

最终结果是我不希望提交表单，除非从打印单选字段和设计单选字段中选择一个值。如果检查失败，我想向用户显示一条错误消息。

*上面的部分代码可能是半伪 感谢您的帮助! :)

Answer 1

好吧，既然你想做什么就更清楚了，那么就这样做以确保每个组中都有一个项目被选中:

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

一旦你确保两者都有一个选定的值，那么你就可以获取使用此代码检查的第一个项目的值:

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