一つでもチェックされていたら別要素にクラス付与するチェックボックス

Question

###前提・実現したいこと
同一のdata-target属性を持つ別要素に対して、一つでもチェックされていたらクラス付与、一つもチェックされていなければクラス除去するチェックボックスを作りたい。

###発生している問題・エラーメッセージ
複数のチェックボックスにチェックを加えていくことはできるが、一つでもチェックを外すと別要素のクラスが外れてしまう。

JSFiddle

###該当のソースコード

<input type="checkbox" id="check1" data-target="#icon1">
<input type="checkbox" id="check2" data-target="#icon1">
<input type="checkbox" id="check3" data-target="#icon1">
<span id="icon1">Icon1</span>

$ (function(){
var $checkBox = $('input[type="checkbox"][data-target^="#icon"], input[type="radio"][data-target^="#icon"]')
	$checkBox.on("click", function () {
		var flag = ($(this).prop('checked')) ? 'addClass' : 'removeClass';
		$($(this).attr('data-target'))[flag]('selected');
	});
});

よろしくお願いいたします。

Answer 1

これでどうでしょう？

<script>
$(function(){
  var selector='input[type="checkbox"][data-target^="#icon"], input[type="radio"][data-target^="#icon"]';
  $(selector).on('change', function () {
    var flg=$(selector).filter(':checked').length>0;
    $($(this).attr('data-target')).toggleClass('selected',flg);
  });
});

Comments

[hibikikudo]

ありがとうございます。今回はアンサーの速さを加味してKei344さんの回答をBAとさせていただきました。

Answer 2

$( function() {
	var $checkBox = $('input[type="checkbox"][data-target^="#icon"], input[type="radio"][data-target^="#icon"]')
	$checkBox.on("click", function () {
		var flag = ( $checkBox.filter( ':checked' ).length > 0 ) ? 'addClass' : 'removeClass';
		$( $( this ).attr( 'data-target' ) )[ flag ]( 'selected' );
	} );
} );
```**動くサンプル：**[https://jsfiddle.net/34tLa6cn/](https://jsfiddle.net/34tLa6cn/)

Comments

[hibikikudo]

ありがとうございます。アンサーの速さを加味してBAとさせていただきました。