jQueryで複数checkboxのチェックされている値のみ簡単に取得する

      2016/05/22

JQueryでcheckboxのチェックされている値のみ取得する

チェックボックスのなかで、チェックされているフォームの値だけを、jQueryを使って取得する方法です。

以下の様なHTMLを用意します。

<label for="test1" class="checkbox">
    <input type="checkbox" name="data[hogehoge][]" value="checked1" id="test1"> checkbox1
</label>
<label for="test2" class="checkbox">
    <input type="checkbox" name="data[hogehoge][]" value="checked2" id="test1"> checkbox2
</label>
<label for="test3" class="checkbox">
    <input type="checkbox" name="data[hogehoge][]" value="checked3" id="test3"> checkbox3
</label>

 

スクリプトは以下のように記述します。もし、checkbox1にチェックが入っているときは、valueにchecked1が入ります。複数チェックが入っているときは、チェックされている数だけループが発生します。

$('.checkbox input:checked').map(function() {
    value = $(this).val();
    console.log(value);
});

ループのなかでそれぞれ処理するようにしてください。

 

megane

megane

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

 - jQuery ,