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

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

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

$(':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ボタンを択一にしたい、、、

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

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

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

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

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

以上になります。