TIPS:チェックボックスの値を読み書きするには[JavaScript/jQuery]JavaScriptでチェックボックスの値を読み書きするには、jQueryのprop/click/valメソッド、属性等価セレクタ、:checkedセレクタを利用するとよい。});連載目次HTMLのチェックボックスやラジオボタンの選択状態を、JavaScriptから読み取りたい、逆に選択状態を設定したいということがあるだろう。選択された値を読み取りたいこともあるだろう。そこで本稿では、jQueryを使ってチェックボックスの状態を読み書きする方法と、選択されたチェックボックスの値を取り出す方法を解説する。ラジオボタンにも応用できる。1個のチェックボックスの状態を読み書きするには?jQueryのpropメソッドを使う。例として、次のような表示およびコードのHTMLを考えてみよう。画面に1個しかないという意味ではなく、複数配置されていたとしても特定の1個だけを対象にするという意味である。1個のチェックボックスチェックボックスの状態が変更されたときに、「(result1)」の部分に状態を表示してみよう。[任意のタイミングで読み取り]ボタンがクリックされたら、「(result2)」の部分に状態を表示しよう。id="result2">(result2)</span></p>1個のチェックボックスの例(HTML)1行目の<input>要素は、type属性に「checkbox」と指定してあるので、チェックボックスになる。そのid属性は「check0」としてある。2行目の<label>要素は、チェックボックスの横に表示するラベルだ。ここをクリックしても、チェックボックスをクリックしたことになる。その下には、id属性に「result1」/「result2」と設定した<span>要素が配置してあることを覚えておいてほしい。それらには、後ほどJavaScriptから結果を表示する。任意のタイミング(ここではボタンのクリック時)にチェックボックスの選択状態を取得するには、次のコードのようにすればよい。//選択状態(真偽値)$("#result2").text(isChecked);});ボタンのクリック時にチェックボックスの選択状態を取得するコードの例(JavaScript)propメソッドで選択状態(trueまたはfalse)が得られる。その真偽値を、textメソッドを使って画面の「(result2)」の部分に表示している。チェックボックスのイベントハンドラーでは、上と同様なコードでも構わないが、次のコードのように「this」が使える。クリックイベントではなく、changeイベント(選択状態が変化したときに発生するイベント)を利用する。$(this).prop("checked");$("#result1").text(isChecked);});チェックボックスのイベントハンドラーで選択状態を取得するコードの例(JavaScript)次に、コードから選択状態を変更してみよう。チェックボックスのchecked属性を変更するだけなら、次のコードのようにpropメソッドを使う。!isChecked);checked属性を変更するコードの例(JavaScript)コードからチェックボックスのchecked属性を変更すると、選択状態が変化する。チェックボックスでchangeイベントは発生しない。上のようにコードからチェックボックスのchecked属性を変更しても、changeイベントは発生しない。changeイベントも発生させたいときは、次のコードのようにclickメソッドを使う。選択状態を反転する(トグル動作)$("#check0").click();clickメソッドを使って選択状態を変更するコードの例(JavaScript)コードからチェックボックスのclickメソッドを呼び出すと、選択状態が変化するとともに、チェックボックスでchangeイベントも発生する。複数のチェックボックスの状態を読み書きするには?複数あっても、個別に選択状態を読み書きするときは上述した1個の場合と同じだ。チェックボックスをまとめて扱うには、jQueryのセレクタを活用して対象とするチェックボックスを選び出し、eachメソッドで処理すればよい。チェックボックスの値(=value属性の値)を読み取るには、jQueryのvalメソッドを使う。例として、次の画像とコードのようなHTMLを考えてみよう。複数のチェックボックス[任意のタイミングで読み取り]ボタンがクリックされたら、選択されているチェックボックスの値を「(result3)」の部分に状態を表示してみよう。[全てクリア]ボタンがクリックされたときは、全部のチェックを外してみよう。id="clearAll">全てクリア</button></p>複数のチェックボックスの例(HTML)3個のチェックボックスを配置した。id属性は「check1」〜「check3」とした。(ここには書かれていない)他のチェックボックスと区別するために、ここではname属性を全て「checkItems」とした。その下には、id属性に「result3」と設定した<span>要素が配置してあることを覚えておいてほしい。そこには、後ほどJavaScriptから結果を表示する。任意のタイミング(ここではボタンのクリック時)に選択されているチェックボックスの値を全て取得するには、次のコードのようにすればよい。目的のチェックボックスを選択するために、属性等価セレクタと:checkedセレクタを使っている。"));});ボタンのクリック時に選択状態のチェックボックスの値を取得するコードの例(JavaScript)条件を満たすチェックボックスを、jQueryのセレクタを活用して取り出している。全ての<input>要素の中から、属性等価セレクタ「[name='checkItems']」を使ってname属性が「checkItems」のものを取り出し、そこから「:checked」セレクタを使ってチェックの付いているものだけを取り出している。ローカル変数checkedには、取り出したチェックボックスが入っているので、eachメソッドを使って、個々のチェックボックスに対して処理をしている(valメソッドで値を取り出して、配列に格納)。上のコードを実行すると、例えば次の画像のようになる。チェックされている複数のチェックボックスの値を読み取る幾つかのチェックボックスを選択状態にしてから、[任意のタイミングで読み取り]ボタンがクリックすると、選択状態になっているチェックボックスの値がボタンの右側に表示される。コードからまとめて選択状態を変更するときも、同様にしてセレクタを活用する(次のコード)。{$(this).click();});});全てのチェックボックスのチェックを外すコードの例(JavaScript)前のコードと同様に、セレクタ「[name='checkItems']:checked」によってチェックが付いたチェックボックスだけを取り出している。その後、checked属性をクリアするだけなら、propメソッドでよい。チェックボックスのイベントも発火させたい場合には、eachメソッドを使って個々のチェックボックスごとにclickメソッドを呼び出す。まとめjQueryでチェックボックスの選択状態を読み書きするには、propメソッドを使う。チェックボックスの値を読み出すには、valメソッドを使う。複数のチェックボックスをまとめて扱うには、セレクタを活用するとよい。メールマガジンをご購読ください。申し込みページへITmediaはアイティメディア株式会社の登録商標です。