.net column
.NET開発者のためのブログメディア

jQueryでのcheckboxのcheckedの扱い方を紹介!checkedを使いこなそう

 
jQueryでのcheckboxのcheckedの扱い方を紹介!checkedを使いこなそう

SE
checkboxの状態判定について教えてください。

PM
では5種類のチェック状態の扱い方について見ていきましょう。

jQueryでのcheckboxのチェック状態(checked)の扱い方について


今回は、jQueryでのcheckboxのチェック状態(checked)の扱い方について説明します。

ここでは、checkboxの
・設定
・取得
・全選択/全解除
・value値の取得
・チェック数取得
について紹介します。

jQueryでのcheckboxのチェック状態(checked)の扱い方に興味のある方はぜひご覧ください。

設定

checkboxのチェック状態を設定するには、propメソッドを使用します。HTMLを以下に記載します。

jQueryは以下のように記述します。

実行結果は以下のようになります。

チェック

複数のチェックボックスをまとめてチェックすることもできます。
以下の場合、name属性指定でチェック状態を設定しています。

jQueryは以下のように記述します。

実行結果は以下のようになります。

チェック1

チェック1
チェック2
チェック3

チェック2

チェック1
チェック2
チェック3

取得

checkboxのチェック状態を取得するには、propメソッド、isメソッド、valメソッドを使用します。HTMLを以下に記載します。

jQueryは以下のように記述します。

実行結果は以下のようになります。

チェック1
チェック2
チェック3

全選択/全解除

checkboxのチェック状態をすべて設定(全選択/全解除)する方法を紹介します。HTMLを以下に記載します。

jQueryは以下のように記述します。buttonのクリックイベントを利用し、name属性指定ですべてを変更します。

実行結果は以下のようになります。

チェック1
チェック2
チェック3


value値の取得

checkboxのvalue値を取得するには、valメソッドを使用します。HTMLを以下に記載します。

jQueryは以下のように記述します。buttonのクリックイベントで、チェックしたvalue値を取得しています。

実行結果は以下のようになります。

チェック1
チェック2
チェック3

チェック数取得

checkboxのチェック数を取得する方法を紹介します。HTMLを以下に記載します。

jQueryは以下のように記述します。

実行結果は以下のようになります。チェック数が0の場合にボタンをクリックすると「チェックしてください」と表示されます。

チェック1
チェック2
チェック3

SE
様々なメソッドを利用して判定しているのですね。

PM
基本的に4種類のメソッドを使って取得や設定を行います。

まとめ

jQueryでのcheckboxの「設定」・「取得」・「全選択/全解除」・「value値の取得」・「チェック数取得」について紹介しました。

ぜひご自身でjQueryのソースコードを書いて、理解を深めてください。


.NET分野でのキャリアアップをお考えの方は、現在募集中の求人情報をご覧ください。

また、直接のエントリーも受け付けております。

エントリー(応募フォーム)

Search

Popular

reccomended

Categories

Tags