要求一个字段或另一个字段，但不能为空— Image或Radio Option

Question

我正在寻找以下功能：

要求用户填写两个字段之一才能提交。

一个字段是图像上传。 另一个字段是单选下拉列表。 我要设置它，以便提交表格，必须选择以下选项之一，但不能两者都选，并且不能都为空。

我怎样才能通过jquery做到这一点？ 原谅我，因为我对jQuery还是比较陌生的，并且仍在学习中。

我一直在考虑validate函数的路线，但是任何获得期望结果的方法都会很好。

Answer 1

做到这一点的一种好方法是允许用户单击两个按钮之一，从而给用户一个选择-然后，您将使用JQuery根据用户选择的选项来显示/隐藏正确的选项。 这意味着在任何时候都只有一个选项可见。 具有以下优点：

1. 用户不能轻易地同时填写这两个选项（如果他们做两次工作而系统拒绝它，则用户不太可能感到困惑/沮丧）。
2. 如果用户没有JS，则浏览器将仅显示两个选项并带有通知（请参见我的示例）。
3. 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. 对于可能是新手/匆忙/不专心的用户，最清晰的系统是什么？
2. 造成挫败的可能性最小的是什么，特别是通过使用户执行后来被您拒绝的工作来？ （解决方案：对其进行设计以自然产生所需的结果。）
3. 目标受众中大多数人最容易接触的是什么？