jQueryで特定のIDで囲まれたcheckboxを一括ON/OFFする

      2016/05/22

jQueryで特定のIDで囲まれたcheckboxを一括ON/OFFする

webシステム構築している時に、【すべての項目をチェック】や【すべての項目を選択解除】などの処理がjQueryだと1行で実現できます。

jQueryを使って、一括で特定のIDで囲まれたチェックボックスをON/OFFする方法です。

■HTMLはこんな感じ

以下の様なHTMLを書きます。サンプルで3つのチェックボックスを用意しています。

<div id="testhogehoge">
    <input type="checkbox" name="test1" value="1">
    <input type="checkbox" name="test2" value="1">
    <input type="checkbox" name="test3" value="1">
</div>

 

■スクリプトの用意

jQueryを利用すると、ON/OFFのスクリプトが1行で実現することができます。

// すべてチェックを入れる
$('#testhogehoge input[type=checkbox]').prop('checked', true);

// すべてチェックを外す
$('#testhogehoge input[type=checkbox]').prop('checked', false);

とても簡単に実装できることができます。参考にしてみてください。


megane

megane

最近、個人事業主から法人へと進化しました。 エンジニア歴13年位です。PHPとかMysqlを使ってWebシステムを構築します。 Javaも書きます。 CakePHPも使います。 サーバのチューニングもごりごりやります。 あと、お肉と自動車が好きです。Twitterとか申請どうぞ。

 - jQuery ,