jQueryのaddClassでクリックしたときに、クラスをつけたいのですが

Question

jQueryのaddClassでクリックしたときに、クラスをつけたいのですが、現在は、下のコードのように今は同じようなjQueryのコードを2つ用意するといった効率の悪いコードの書き方をしています。

変数やfor文などでもっと効率のいい方法を探しています

inputのラジオボタンのbackgroundを選択した物だけ変えるようにしたいです。今回はcssの質問ではないので、cssのコードについては控えます。selectedを付けるとbackgroundの色が変わるものとします。

selectedの付け方は、ラジオボタンのような機能にしたいです。

コーディングは、初心者なのでご指導のほどよろしくお願いします。

HTML

<div>
        <label class="schoolgrade"><input type="radio" name="schoolgrade" value="4" required>小学4年生</label>
        <label class="schoolgrade"><input type="radio" name="schoolgrade" value="5" required>小学5年生</label>
        <label class="schoolgrade"><input type="radio" name="schoolgrade" value="6" required>小学6年生</label>
</div>
<div>
        <label class="schoolclass"><input type="radio" name="schoolclass" value="1" required>1組</label>
        <label class="schoolclass"><input type="radio" name="schoolclass" value="2" required>2組</label>
        <label class="schoolclass"><input type="radio" name="schoolclass" value="3" required>3組</label>
        <label class="schoolclass"><input type="radio" name="schoolclass" value="4" required>4組(</label>
</div>

jQuery

$('.schoolgrade').on('click', function(){
  if($('.schoolgrade').hasClass('selected')){
    $('.schoolgrade').removeClass('selected');
    $(this).addClass('selected');
  }else{
    $(this).addClass('selected');
  }
})

$('.schoolclass').on('click', function(){
  if($('.schoolclass').hasClass('selected')){
    $('.schoolclass').removeClass('selected');
    $(this).addClass('selected');
  }else{
    $(this).addClass('selected');
  }
})

Comments

[m.ts10806]

＞今回はcssの質問ではないので、cssのコードについては控えます
ただ、「背景色を付ける」という仕様なのであれば、せめてその部分だけでもご提示いただけませんか？

Answer 1

$(function(){
  $('.schoolgrade,.schoolclass').on('click', function(){
    $('.schoolgrade,.schoolclass').removeClass('selected').has(':checked').addClass('selected');
  })
});

わざわざクラスつけなくてもいい気がします

<script>
$(function(){
  $('label').on('click', function(){
    $('label').removeClass('selected').has(':checked').addClass('selected');
  })
});
</script>
<div>
        <label><input type="radio" name="schoolgrade" value="4" required>小学4年生</label>
        <label><input type="radio" name="schoolgrade" value="5" required>小学5年生</label>
        <label><input type="radio" name="schoolgrade" value="6" required>小学6年生</label>
</div>
<div>
        <label><input type="radio" name="schoolclass" value="1" required>1組</label>
        <label><input type="radio" name="schoolclass" value="2" required>2組</label>
        <label><input type="radio" name="schoolclass" value="3" required>3組</label>
        <label><input type="radio" name="schoolclass" value="4" required>4組</label>
</div>

Comments

[yambejp]

クラス名selectedには違和感。
こういうときはたいていactiveとか使います。
ラジオボタン絡みでselectedという別系統の名前をつけると
混乱のもとにしかならない、せめてchecked

[CopanSassa]

なるほど、この書き方すごい勉強になりました！！
selectedもよくないんですね！！
参考にさせていただきます

Answer 2

私ならこうします。

<div class="js-schoolCheck"> <!-- 共通のクラスを追加 -->
        <label class="schoolgrade"><input type="radio" name="schoolgrade" value="4" required>小学4年生</label>
        <label class="schoolgrade"><input type="radio" name="schoolgrade" value="5" required>小学5年生</label>
        <label class="schoolgrade"><input type="radio" name="schoolgrade" value="6" required>小学6年生</label>
</div>
<div class="js-schoolCheck"> <!-- 共通のクラスを追加 -->
        <label class="schoolclass"><input type="radio" name="schoolclass" value="1" required>1組</label>
        <label class="schoolclass"><input type="radio" name="schoolclass" value="2" required>2組</label>
        <label class="schoolclass"><input type="radio" name="schoolclass" value="3" required>3組</label>
        <label class="schoolclass"><input type="radio" name="schoolclass" value="4" required>4組(</label>
</div>

$('.js-schoolCheck').each(function(){
  $(this).find('label').on('click', function(){
    $(this).toggleClass('selected');
  });
});

Comments

[x_x]

チェックボックスではなくラジオボタンなのでこれではおかしくなります

[CopanSassa]

mkskさんもx_xさんもありがとうございます！！
勉強させてもらいました！！

Answer 3

onは登録式なので仰る通り配列でループさせれば良いと思います。

※あくまで今のコードを活かす場合。そもそもかなり冗長な作りです

const list = ['grade','class'];
$(function() {
	$.each(list, function(index, value){
		let className = '.school'+value;
		$(className).on('click', function(){
		  if($(className).hasClass('selected')){
			$(className).removeClass('selected');
			$(this).addClass('selected');
		  }else{
			$(this).addClass('selected');
		  }
		})
	})
});

Comments

[CopanSassa]

私の質問に沿っていただきありがとうございます。
とても勉強になります！！

[m.ts10806]

まずは「できるやりかた」で１個ずつ手続き的に書いていくのが良いと思います

Answer 4

toggleClass
http://semooh.jp/jquery/api/attributes/toggleClass/class/

Comments

[CopanSassa]

便利なものがあるんですね・・・
ありがとうございます！！