1つのフィールドまたは他を必要とするが、空白のままにすることはできません - 画像やラジオのオプション

Question

私は次の機能を探しています：

ユーザーが送信できるようにするために、2つのフィールドのいずれかのいずれかを記入する必要があります。

1つのフィールドは画像のアップロードです。もう1つのフィールドはラジオドロップダウンリストです。フォームを送信するには、これらのオプションのうち1つを選択する必要がありますが、両方を選択する必要はなく、両方を空白にすることはできません。

は、どのように私は多分jqueryのを介してこれを行うのですか？私はjqueryに比較的新しいと私はまだ勉強しているように私を許してください。

私は検証機能の線に沿って考えていたが、私の希望する結果を得るためにどのような方法がよいでしょう。

Answer 1

これを行うには、ユーザーが2つのボタンのいずれかをクリックできるようにする選択肢があります.JQueryを使用して、選択したオプションに基づいて適切なオプションを表示/非表示にします。つまり、いつでも1つのオプションしか表示されません。これは、これらの利点があります。

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. ターゲットオーディエンスのほとんどの人々に最もアクセス可能ですか？