需要一个场或其他，​​但不能留空 - 图像或广播选项

Question

我找了以下功能：

要求用户填写任意两个领域中的一个能够提交。

一个字段是图片上传。另一个字段是一个广播下拉列表。我希望它的设置是为了提交表格，必须选择其中的一个选项，但不能同时选择，两者都不能为空。

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

我正在考虑验证函数的行，但任何方式来获得我想要的结果会很好。

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. 目标受众中大多数人最容易接触什么？