ようこそ「JavaScript/jQuery」へ...
jQueryを使用して表のヘッダーに表示されているCheckBoxをクリックしてすべての行を選択する
Coming soon...
作成手順
Coming soon...
操作手順
-
サンプルが表示されたらこのページの先頭に移動して「説明文の表示・非表示切り替え」をチェックして説明文を非表示にします。
もしくは「ライブデモを見る...」のリンクをクリックします。説明文が非表示になります。
-
「Live DEMO」の直下に表示されている表から行1のチェックボックスをクリックしてチェックされた状態にします。
-
行1が黄色で反転表示します。さらに、ヘッダー行のチェックボックスもチェックされた状態になります。
同様の手順で行2のチェックボックスもチェックします。これで行1-2がチェックされた状態になっています。
-
今度はヘッダーのチェックボックスをクリックしてチェックを外して見てください。
行1-2のチェックボックスも同時にチェックが外れます。
-
次に、行5のチェックボックスをクリックします。行5が黄色で反転表示します。そして、ヘッダーのチェックボックスもチェックされた状態になります。
-
この状態で行5のチェックを外して見てください。ヘッダーのチェックも自動的に外れます。