【jQuery】選択状態のcheckboxを全て取得する方法【初心者向け】
jQuery初心者
jQueryを使ってcheckboxで選択されている要素だけを取得する方法を知りたい、選択していないものまで取得しちゃって上手くいかないので教えてほしい。
この記事では、jQueryを使って選択済みのcheckboxだけ取得する方法について解説します、
[selectbox][radio]についても解説しているので幅広く応用できるかと思います。是非参考にしてみてください。目次【本記事の内容】
選択状態の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エンジニアとして働いている私も最初はこのレベル、頑張りましょう。
以上になります。