web-dev-qa-db-ja.com

ラジオボタン内にチェックボックスをネストする:より良い方法はありますか?

ユーザーが自分のビジネスの自己評価を記入できるアプリケーションを作成しています。いくつかのオプションを使用して、ユーザーが作品を印刷できるようにしたいと思います。

  1. すべての質問/回答(まだ回答されていないものを含む)を印刷します

  2. ユーザーが回答した質問のみを印刷します。

  3. ユーザーが回答した質問のみを出力し、特定の回答に一致します

これらの3つのオプションは相互に排他的であるため、ラジオボタンの候補として適していますが、3番目のオプションはsubを選択する必要があるため、いくつかの問題があります。

これは現在私が設計した方法です:

Radio button group with nested checkboxes

このフォームをレイアウトするより良い方法はありますか?

6
rickymetz

'expose within'ラジオボタンパターンを使用する

あなたが持っているものは実際には大丈夫ですが、Cody Reevesがここで提案したように、チェックリスト(または他の動的コンテンツ)を非表示にします。

Luke Wはこのパターンを本Web Form Designでレビューしています。

以下は、Chris Coyierの Codepenジョブフォーム の例です。

expose within radio buttons

デザインを調整すると、最後のラジオボタンの下にある灰色の線が消える可能性があります。チェックボックスが属する選択とは別に表示されます。

[1]: https://codepen.io/job/new

6
Mike M

1つの解決策は、「回答タイプのみ」ラジオがチェックされるまでチェックボックスを非表示にすることです。これにより、必要になるまですべてのオプションが一度に提供されないため、ユーザーが現在のフォームで混乱する可能性のほとんどが緩和されます。

2
Cody Reeves