Question

我正在寻找以下功能：

用户需要填写两个字段中的任何一个才能提交。

一个字段是图片上传。另一个字段是无线电下拉列表。我希望它设置为这样，为了提交表单，必须选择其中一个选项但不能同时选择，并且两者不能为空。

我怎么能通过jquery做到这一点？原谅我，因为我对jquery相对较新，而且还在学习。

我正在考虑验证功能，但任何获得我想要的结果的方法都会很好。

Answer 1

这样做的一个好方法是让用户通过单击两个按钮中的一个来为用户做出选择 - 然后您将使用JQuery根据他们选择的选项显示/隐藏正确的选项。这意味着任何时候只能看到一个选项。这有以下优点：

用户不能轻易填写这两个选项（如果用户执行两次工作并且系统拒绝它，则用户不太可能感到困惑/沮丧。）
如果用户没有JS，浏览器将只显示带有通知的两个选项（参见我的示例）。
Jquery非常简单，在IE /非主流浏览器上不会轻易破解。

这是我将如何做到的（未经测试但应该工作）。

# view
<button type="button" id="choose_image">Upload an image</button>
<button type="button" id="choose_radio">Choose from list</button>
<div id="noJS">
  Please only complete ONE of these two options.
</div>
<div id="image">
   ...
</div>
<div id="radio">
  ...
</div>

# Jquery
$(document).onload( function(){
  $('#noJS').hide();
  $('#radio').hide();
})
$('#choose_image').click( function(){
  $('#radio').hide(); // or slideToggle() or fadeOut() etc.
  $('#image').show();
});
$('#choose_radio').click( function(){
  $('#radio').show();
  $('#image').hide();
});

一般而言，无论您选择哪种方法，都有一些注意事项：

对于可能是新手/匆忙/不注意的用户来说，最清晰的系统是什么？
最不可能导致挫败感的是什么，尤其是让用户做以后拒绝的工作？（解决方案：设计它自然会产生你想要的结果。）
目标受众中大多数人最容易获得的是什么？

需要一个字段或另一个字段但不能留空 - 图像或无线电选项

1 个答案: