やってみようやることの左の四角を押してみてください。「すべて」を押すとまとめて切り替わります
入力フォームメジャー(よく見る)
チェックボックス
Checkbox
四角い枠を押すと ✓ が入る。いくつでも選べる。
別名チェックチェックマーク選択ボックス全選択
どこで使われている?
- よく見かける場所
- 会員登録の利用規約への同意、メールの一括選択、やることリスト
- 使うとよい場面
- 複数を選べるとき、「保存」で確定する設定
- 避けたい場面
- 1つしか選べないとき(ラジオボタンにする)
補足1つしか選べないものは「ラジオボタン」、押してすぐ反映される設定は「トグルスイッチ」が向いています。
似ているものとの違い
AIへの指示文
これをコピーしてAIに貼り付ければOKです。Webサイトを作る前提の内容です(右上の「何を作る?」で変えられます)。
HTML / CSS / JavaScript で「チェックボックス(Checkbox)」を実装してください。 動き:選択肢ごとに四角い枠を置き、押すとチェックマークを描くアニメーションで ✓ を入れる。複数選べる。上に「すべて選択」を置き、一部だけ選ばれているときは「−」の表示にする。 使う部品:<input type="checkbox">(一部選択は indeterminate)
もっと詳しく:プログラムでの部品名
同じ動きでも、作るものによってプログラムの中での部品の名前が違います。上の指示文にはすでに入っているので、覚える必要はありません。AIの説明に出てきた単語を確認したいときに使ってください。
| Webサイトなら | <input type="checkbox">(一部選択は indeterminate) |
|---|---|
| iPhoneアプリなら | 標準部品なし(リストの行に checkmark を付けて自作) |
| Androidアプリなら | Checkbox(全選択は TriStateCheckbox) |
| Flutterなら | Checkbox(行ごとなら CheckboxListTile) |
| React Nativeなら | expo-checkbox |