ここから本文です

javascritpのfor文の書き方を教えてください。 チェックされてたらクラス付与、...

pyo********さん

2018/6/1122:59:03

javascritpのfor文の書き方を教えてください。

チェックされてたらクラス付与、というJSですが、下記だとチェックボックスが1つのときにしか作動してくれませんでした。

var checked = $(".checkbox:checked").parent().find('span').text();
$('#box_'+checked).addClass('on');

複数ある場合のつもりで下記のように forEach を書いてみても出来ず、どなたか正しい書き方を教えていただけませんでしょうか?
var checked = $(".checkbox:checked").parent().find('span').text();
forEach(function( ) {
$('#box_'+checked).addClass('on');
});

宜しくお願い致します。

閲覧数:
47
回答数:
2
お礼:
250枚

違反報告

ベストアンサーに選ばれた回答

プロフィール画像

カテゴリマスター

siiさん

2018/6/1123:20:31

$('.checkbox:checked').each(function () {
  const checked = $(this).parent().find('span').text()
  $('#box_' + checked).addClass('on')
})

HTML構造や最終的な状態が不明なので当てずっぽですが、こんな感じでしょうか?

1つ1つのチェックボックスに対して、テキストを取得して変数に代入する処理と、そのテキストを使った処理がありますので、チェックボックスを$.eachで回すという流れではないかと推測されます。

  • 質問者

    pyo********さん

    2018/6/1200:23:33

    仰る通りでした。ありがとうございます。
    オマケで一つだけ教えていただけませんでしょうか?(/ω\)

    ご提示のコードに3か所コンマを付けても同じように作動しました↓

    $('.checkbox:checked').each(function () {
    const checked = $(this).parent().find('span').text();
    $('#box_' + checked).addClass('on');
    });

    私はこうしていつも最後にコンマ「;」をつけていたのですが、これは不要だったのでしょうか?

  • その他の返信(3件)を表示

返信を取り消しますが
よろしいですか?

  • 取り消す
  • キャンセル

ベストアンサー以外の回答

1〜1件/1件中

プロフィール画像

カテゴリマスター

2018/6/1208:00:12

チェックボックスが複数ある場合で、
チェックされていたら、クラスを付与する。

それには、いろいろなやり方があります。

そこで、素のJS版とjQuery版のサンプルを作ってみました。

【サンプル・コード】

<style>
/* クラス属性 */
/* チェックされていたら チェックボックスを1.5倍に拡大します. */
.on {
transform: scale(1.5);
}
</style>

<!-- [HTML] -->
<form>
<fieldset>
<label><span>1</span><input type="checkbox" id="box_1" class="checkbox" value="1" checked>check1</label>
<label><span>2</span><input type="checkbox" id="box_2" class="checkbox" value="2">check2</label>
<label><span>3</span><input type="checkbox" id="box_3" class="checkbox" value="3" checked>check3</label>
<label><span>4</span><input type="checkbox" id="box_4" class="checkbox" value="4">check4</label>
<label><span>5</span><input type="checkbox" id="box_5" class="checkbox" value="5">check5</label>
</fieldset>
</form>

<script>
//[1] JavaScript Version

onload = function(){
document.querySelectorAll('.checkbox').forEach(function(v) {
if(v.checked){
const checked = v.previousSibling.textContent;
document.querySelector('#box_' + checked).classList.add('on');
}
});
};
</script>

<script>
//[2] jQuery Version

$(function(){
$.each($('.checkbox:checked'),function() {
const checked = $(this).prev('span').text();
$('#box_' + checked).addClass('on');
});
});
</script>

以上、お試しになってみてください。

この質問につけられたタグ

みんなで作る知恵袋 悩みや疑問、なんでも気軽にきいちゃおう!

Q&Aをキーワードで検索:

Yahoo! JAPANは、回答に記載された内容の信ぴょう性、正確性を保証しておりません。
お客様自身の責任と判断で、ご利用ください。
本文はここまでです このページの先頭へ

「追加する」ボタンを押してください。

閉じる

※知恵コレクションに追加された質問は選択されたID/ニックネームのMy知恵袋で確認できます。

不適切な投稿でないことを報告しました。

閉じる