macoblog

「ゲーム × プログラミング」で生きていく

毎週金曜夜22時〜LIVEやってます

【jQuery】選択状態のcheckbox全てを取得する方法【初心者向け】

JavaScript プログラミング

jQuery悩み人

jQuery悩み人
「checkboxで選択されているものだけを取得する方法を知りたい、選択していないものまで取得しちゃって上手くいかないんだ、、、」

こんな悩みに答える記事になります。

本記事では、jQueryを使って選択済みのcheckboxだけ取得する方法について解説します[selectbox][radio]についても解説しているので幅広く応用できるかと思います。是非参考にしてみてください。

「jQueryならコピペで解決」

目次【本記事の内容】

スポンサードサーチ


選択状態のcheckboxだけ取得する方法

選択されているcheckboxだけ取得したい時はeachを使えば簡単です、見積もりフォームを作る時なんかに便利ですね。

※特定の範囲で絞り込む場合はセレクタの指定を変えてあげましょう
クラス[wrap]内のcheckboxに絞り込む場合は一行目の
[:checkbox:checked][.wrap :checkbox:checked]とすればOKです。
$(':checkbox:checked').each(function() {
  //値を取得
  var val = $(this).val();
  console.log(val);
});

radioバージョン

ラジオボタンの場合は、一行目のセレクタの指定をradioに変えるだけで使い回すことができます。

$(':radio:checked').each(function() {
  //値を取得
  var val = $(this).val();
  console.log(val);
});

selectboxバージョン

セレクトボックスの場合は、セレクタの指定をoptionにし:selectedで指定すればOKです。

ちなみに:selected:checkedでも大丈夫です、なぜそうしないのかって?そりゃ今使わないと需要ないからにきまっ、、、これ以上は可哀想でしょ。

$('option:selected').each(function() {
  //値を取得
  var val = $(this).val();
  console.log(val);
});

まとめて取得する方法

[checkbox][radio][select]全てまとめて取得したい場合は、カンマ区切りでセレクタを指定すればOKです。

$(':checkbox:checked,:radio:checked,option:selected').each(function() {
  //値を取得
  var val = $(this).val();
  console.log(val);
});

まとめて取得した上で処理を振り分ける方法

まとめて取得した上で[checkbox][radio][select]で処理を振り分けたい場合はisを使うと簡単にできます。

$(':checkbox:checked,:radio:checked,option:selected').each(function() {

  if($(this).is(':radio')){
    console.log('radioです');

  }else if($(this).is(':checkbox')) {
    console.log('checkboxです');

  }else {
    console.log('selectboxです');
  }
  
});

スポンサードサーチ


終わりに:radioボタンを択一にしたい、、、

いかがでしたでしょうか。

使う機会は限られているかもしれませんが、処理自体は単純で分かりやすいので勉強にも使えるかと思います、コピペして動かして感覚を掴んでみて下さい。

最後に、過去の自分に向けてとある解を投げて終わりたいと思います。

ラジオボタンが択一にならないんだけど?

回答:択一にしたいラジオボタンのnameを同じにすればいい。

今はWEBエンジニアとして働いている私も最初はこのレベル、頑張りましょう。

以上になります。