ページごとに小さな広告を1つ表示するだけだと約束します。ご安心ください。このメッセージを非表示にすると、二度と表示されなくなります。
種類
チェックボックス
標準的なチェックボックス
ラジオボタン
チェックボックスはラジオボタンとしてフォーマットできます。これは、排他的なオプションであることを意味します。
スライダー
チェックボックスは、現在の選択状態を強調するようにフォーマットできます。
トグル
チェックボックスは、オンまたはオフの選択肢を表示するようにフォーマットできます。
状態
読み取り専用
チェックボックスは読み取り専用にすることができ、状態を変更できません。
オン
チェックボックスをオンにすることができます。
不定
チェックボックスを不定の状態にすることができます。
無効
チェックボックスは読み取り専用にすることができ、状態を変更できません。
バリエーション
フィット
フィットされたチェックボックスは、ラベルのパディングを残しません。
例
コールバックの使用
チェックボックスには、状態変化の動作の各バージョンが2つあり、コールバックをトリガーするかどうかを決定できます。
checkのような動作を呼び出すと、要素のコールバックがトリガーされますが、checked を設定を使用すると、コールバックをトリガーせずにチェックボックスの状態が調整されます。
この違いは、プログラムによる変更とユーザーによる状態変更を区別するために重要です。
例
コンソール
var $console = $('.callback .console') ; $('.callback.example .checkbox') .checkbox() .first().checkbox({ onChecked: function() { $console.append('onChecked called
'); }, onUnchecked: function() { $console.append('onUnchecked called
'); }, onEnable: function() { $console.append('onEnable called
'); }, onDisable: function() { $console.append('onDisable called
'); }, onDeterminate: function() { $console.append('onDeterminate called
'); }, onIndeterminate: function() { $console.append('onIndeterminate called
'); }, onChange: function() { $console.append('onChange called
'); } }) ; // ボタンにイベントをバインドする $('.callback.example .button') .on('click', function() { $('.callback .checkbox').checkbox( $(this).data('method') ); }) ;
'); }, onUnchecked: function() { $console.append('onUnchecked called
'); }, onEnable: function() { $console.append('onEnable called
'); }, onDisable: function() { $console.append('onDisable called
'); }, onDeterminate: function() { $console.append('onDeterminate called
'); }, onIndeterminate: function() { $console.append('onIndeterminate called
'); }, onChange: function() { $console.append('onChange called
'); } }) ; // ボタンにイベントをバインドする $('.callback.example .button') .on('click', function() { $('.callback .checkbox').checkbox( $(this).data('method') ); }) ;
グループ化されたチェックボックス
indeterminate状態を使用して、オンでもオフでもない値を表すことができます。
これは、「マスター」チェックボックスが他のいくつかのチェックボックスの選択を表示する必要があるグループで役立ちます。
$('.list .master.checkbox') .checkbox({ // 子要素をすべてオンにする onChecked: function() { var $childCheckbox = $(this).closest('.checkbox').siblings('.list').find('.checkbox') ; $childCheckbox.checkbox('check'); }, // 子要素をすべてオフにする onUnchecked: function() { var $childCheckbox = $(this).closest('.checkbox').siblings('.list').find('.checkbox') ; $childCheckbox.checkbox('uncheck'); } }) ;
$('.list .child.checkbox') .checkbox({ // 親の値を設定するためにロード時に実行する fireOnInit : true, // 各子チェックボックスの変更時に親の状態を変更する onChange : function() { var $listGroup = $(this).closest('.list'), $parentCheckbox = $listGroup.closest('.item').children('.checkbox'), $checkbox = $listGroup.find('.checkbox'), allChecked = true, allUnchecked = true ; // 他のすべての兄弟がオンまたはオフになっているかどうかを確認する $checkbox.each(function() { if( $(this).checkbox('is checked') ) { allUnchecked = false; } else { allChecked = false; } }); // 親チェックボックスの状態を設定しますが、そのonChangeコールバックはトリガーしません if(allChecked) { $parentCheckbox.checkbox('set checked'); } else if(allUnchecked) { $parentCheckbox.checkbox('set unchecked'); } else { $parentCheckbox.checkbox('set indeterminate'); } } }) ;
条件の確認
チェックボックスには、4つの新しいコールバックbeforeChecked、beforeUnchecked、beforeDeterminate、beforeIndeterminateが含まれており、これらのコールバックからfalseを返すことで、入力値が更新される前にアクションの実行をキャンセルできます。
$('.cancel.example .ui.checkbox') .checkbox({ beforeChecked: function() { var luckyPerson = (Math.random() < 0.5) ; return luckyPerson; } }) ;
一方向の選択肢
ユーザーがボックスをオンにできるが、オフにできないようにするには、uncheckable設定を使用します。
チェックボックスを常に無効にするには、入力にdisabledプロパティを追加します。
チェックボックスを読み取り専用にするには、初期化しないか、イベントを許可しないread-onlyクラスを含めます。
$('.state.example .checkbox') .last() .checkbox({ uncheckable: false }) ;
他の要素へのイベントの追加
チェックボックスは、attach events動作を使用して、他のアクティブ化要素にイベントを簡単に追加できます。これはデフォルトでトグルになっていますが、他の動作も使用できます。
$('.test.checkbox').checkbox('attach events', '.toggle.button'); $('.test.checkbox').checkbox('attach events', '.check.button', 'check'); $('.test.checkbox').checkbox('attach events', '.uncheck.button', 'uncheck');
初期化
チェックボックス
チェックボックスは、機能するためにJavaScriptを必要としません。
フル機能のチェックボックス
チェックボックスでJavaScriptを使用すると、チェックボックスのラベルが自動的に入力の変更をトリガーし、コールバック関数を提供します。さらに、indeterminateなどの状態は、JavaScriptでのみトリガーできます。
リンクされたラベル
JavaScriptチェックボックスの他の機能を必要とせずに、ラベルをリンクするだけであれば、ラベルのfor属性を入力IDと一致させることができます。
動作
動作は、次の構文を使用してJavaScriptでアクセスできます。
$('.ui.checkbox').checkbox(動作, 引数1, 引数2...);
| トグル | チェックボックスを現在の状態から切り替えます。 |
| オン | チェックボックスの状態をオンに設定します。 |
| オフ | チェックボックスの状態をオフに設定します。 |
| 不定 | 不定のチェックボックスに設定します。 |
| 確定 | 確定のチェックボックスに設定します。 |
| 有効化 | チェックボックスとのインタラクションを有効にします。 |
| オンに設定 | コールバックなしでチェックボックスの状態をオンに設定します。 |
| オフに設定 | コールバックなしでチェックボックスの状態をオフに設定します。 |
| 不定に設定 | コールバックなしで不定のチェックボックスに設定します。 |
| 確定に設定 | コールバックなしで確定のチェックボックスに設定します。 |
| 有効化に設定 | コールバックなしでチェックボックスとのインタラクションを有効にします。 |
| 無効化に設定 | コールバックなしでチェックボックスの操作を無効にする |
| イベントをアタッチする(セレクター、動作) | チェックボックスイベントを別の要素にアタッチする |
| ラジオボタンか？ | 要素がラジオ選択ボタンかどうかを返す |
| チェック済みか？ | 要素が現在チェックされているかどうかを返す |
| チェックされていないか？ | 要素がチェックされていないかどうかを返す |
| 変更可能か？ | 要素を変更できるかどうかを返す |
| チェックを許可すべきか？ | 要素をチェックできるかどうかを返す（既にチェックされているか、`beforeChecked`がキャンセルするかどうかを確認する） |
| チェック解除を許可すべきか？ | 要素をチェック解除できるかどうかを返す（既にチェック解除されているか、`beforeUnchecked`がキャンセルするかどうかを確認する） |
| 確定状態を許可すべきか？ | 要素を確定状態にできるかどうかを返す（既に確定状態か、`beforeDeterminate`がキャンセルするかどうかを確認する） |
| 不定状態を許可すべきか？ | 要素を不定状態にできるかどうかを返す（既に不定状態か、`beforeIndeterminate`がキャンセルするかどうかを確認する） |
| チェック解除可能か？ | 要素をチェック解除できるかどうかを返す |
チェックボックス
これらの設定はチェックボックスに固有のものであり、その動作のパラメータを決定します。
| デフォルト | 説明 | |
|---|---|---|
| チェック不可 | 自動 | true/falseに設定すると、入力で選択を許可するかどうかが決まります。自動では、ラジオボタンのみこの動作を許可しません。 |
| 初期化時に実行 | false | チェック済みのステータスに対するコールバックを、変更時だけでなく初期化時にも実行するかどうか |
| コンテキスト | 説明 | |
|---|---|---|
| onChange | HTML入力要素 | チェックボックスがチェックされたか、チェック解除された後のコールバック。 |
| onChecked | HTML入力要素 | チェックボックスがチェックされた後のコールバック。 |
| onIndeterminate | HTML入力要素 | チェックボックスが不定状態に設定された後のコールバック。 |
| onDeterminate | HTML入力要素 | チェックボックスが確定状態に設定された後のコールバック。 |
| onUnchecked | HTML入力要素 | チェックボックスがチェック解除された後のコールバック。 |
| beforeChecked | HTML入力要素 | チェックボックスがチェックされる前のコールバック。`false`を返すと変更をキャンセルできます。 |
| beforeIndeterminate | HTML入力要素 | チェックボックスが不定状態に設定される前のコールバック。`false`を返すと変更をキャンセルできます。 |
| beforeDeterminate | HTML入力要素 | チェックボックスが確定状態に設定される前のコールバック。`false`を返すと変更をキャンセルできます。 |
| beforeUnchecked | HTML入力要素 | チェックボックスがチェック解除される前のコールバック。`false`を返すと変更をキャンセルできます。 |
| onEnable | HTML入力要素 | チェックボックスが有効化された後のコールバック。 |
| onDisable | HTML入力要素 | チェックボックスが無効化された後のコールバック。 |
モジュール
これらの設定はすべてのモジュールにネイティブに存在し、コンポーネントがコンテンツをDOM属性にどのように結び付けるか、およびモジュールのデバッグ設定を定義します。
| デフォルト | 説明 | |
|---|---|---|
| 名前 | チェックボックス | ログステートメントで使用される名前 |
| 名前空間 | checkbox | イベントの名前空間。モジュールのティアダウンが、要素にアタッチされた他のイベントに影響を与えないようにします。 |
| セレクター |
selector : { input : 'input[type=checkbox], input[type=radio]', label : 'label' }
|
モジュールの各部分を検索するために使用されるセレクター |
| クラス名 |
className : { checked : 'checked', disabled : 'disabled', radio : 'radio', readOnly : 'read-only' }
|
要素の状態を決定するために使用されるクラス名 |
| サイレント | False | 他のデバッグ設定に関係なく、エラーメッセージを含むすべてのコンソール出力を無効にします。 |
| デバッグ | false | コンソールへのデバッグ出力 |
| パフォーマンス | true | パフォーマンスメトリクスを含む`console.table`出力を表示する |
| 詳細 | false | デバッグ出力には、すべての内部動作が含まれます。 |
| エラー |
error : { method : '呼び出したメソッドは定義されていません。' }
|
|