addClassとremoveClassのタイミングがよくわかりません

Question

###目的
２つチェックしたときにclass.pair_onが付与されdisplay:block;し、他の２つがチェックされたらそれを外してdisplay:none;にする。

という機能を作りたいです。

しかしaddClassとremoveClassのタイミングがよくわかりません。

###現状
現状はremoveClassを書いているのに.pair_onが外れてくれないためdisplay:none;にならず、下図のようにdisplay:block;（水色の中の項目）が増え続けてしまいます。

どのように書けば目的のように水色の項目を１つにできるでしょうか？

▼上図のサンプル
https://jsfiddle.net/tLv577fn/

▼そのコード

<div class="check-wrap">
		<div>
			<p>２つチェックしてください。</p>
		</div>
		<ul id="fluits_list">
			<li><input id="fluits_apple" class="check_fluits" name="check_fluits" value="apple" type="checkbox">
				<label for="fluits_apple" class="check_label">
				<span class="i apple"></span>
				</label>
			</li>
			<li><input id="fluits_banana" class="check_fluits" name="check_fluits" value="banana" type="checkbox">
				<label for="fluits_banana" class="check_label">
				<span class="i banana"></span>
				</label>
			</li>
			<li><input id="fluits_kiwi" class="check_fluits" name="check_fluits" value="kiwi" type="checkbox">
				<label for="fluits_kiwi" class="check_label">
				<span class="i kiwi"></span>
				</label>
			</li>   
		</ul>
</div>

<div class="output-wrap">
    <p>選択中のフツールはこちらです。</p>
		<div>
      <p><span id="output_name1"></span>→<span id="output_name2"></span></p>      
		</div>		
</div>

<div class="pair-wrap">
  <div id="pair_none" class="fluits-widget">相性が良いのは何かな？</div>
  <div id="pair_applebanana" class="fluits-widget pair_on">りんごの後のバナナは相性ばつぐん！</div>
  <div id="pair_bananaapple" class="fluits-widget">バナナの後のリンゴはまぁまぁの相性。</div>  
  <div id="pair_applekiwi" class="fluits-widget">りんごの後のキウイはぼちぼちの相性。</div>
  <div id="pair_kiwiapple" class="fluits-widget">キウイの後のリンゴはなかなかの相性。</div>  
  <div id="pair_kiwibanana" class="fluits-widget">キウイの後のバナナはほどほどの相性。</div>
  <div id="pair_bananakiwi" class="fluits-widget">バナナの後のキウイは相性サイコー！</div>
  <div id="pair_applekiwi" class="fluits-widget">りんごの後のキウイは相性サイテー！</div>
  <div id="pair_kiwiapple" class="fluits-widget">キウイの後のリンゴは相性ぴったり。</div>   
</div>

$(function(){

/**************************
/*ピンクと黄緑の部分は完璧
**************************/
  $('input[name=check_fluits]').change(function(){
    var clone=$(this).siblings().find('.i').clone();
    if($('input[name=check_fluits]:checked').length>2) {
      $(this).prop("checked",false);
      alert("チェックは２つまで");
      return false;
    }
    if($(this).prop('checked')){
      $('#output_name1,#output_name2').filter(function(){
        return $(this).html()=="";
      }).eq(0).html(clone);
    }else{
      console.log($.map(clone.prop('classList'),function(x){return "."+x;}).join(""));
      $('#output_name1,#output_name2').has($.map(clone.prop('classList'),function(x){return "."+x;}).join("")).html("");
    }
  });
  $('input[name=check_fluits]').prop('checked',false).filter('[value=apple],[value=banana]').prop('checked',true).trigger("change");
	
/**************************
/*水色の部分がちょっとあやしい
**************************/ 
	$('input[name=check_fluits]').change(function(){
  
        //チェックがないときは「#paie_none」だけを表示
        if($('#fluits_list :checked').length == 0){  
  		$('#pair_none').fadeIn();
        }
  
		var pair1 = $('#output_name1 .i').get(0).className.split(" ")[1];
		var pair2 = $('#output_name2 .i').get(0).className.split(" ")[1];
		var pair3 = ('pair_' + pair1 + pair2);
        if($('#fluits_list :checked').length == 2){
        $('#' + pair3).addClass('pair_on');
        
        //こうすれば水色の相性についての表示を１つにできると思ったのですが…
        $('.fluits-widget:first-of-type').removeClass('pair_on');
        
        }
	});
	
});

/*******************
/*チェックエリア（ピンク）
********************/
.check-wrap {
  background: #ffcccc;
}
#fluits_list {
    list-style: none;
    padding: 0;
}
.apple:before {
  content:'りんご';
}
.banana:before {
  content:'バナナ';
}
.kiwi:before {
  content:'キウイ';
}
.grape:before {
  content:'ぶどう';
}

/*******************
/*出力エリア（黄緑）
********************/
.output-wrap {
  background: #d8ffb2;
}

/*******************
/*愛称エリア（水色）
********************/
.pair-wrap {
  background: #c4fdff;
}
.fluits-widget {
	display: none;	
}
.pair_on {
  display: block;
}

長くなってしまってすみません。どなたかご教示頂けませんでしょうか(>_<)
よろしくお願いいたします。

Answer 1

	$('input[name=check_fluits]').change(function(){
                // この部分追加しました。
                $('.fluits-widget').each(function(index,dom){
		    $(dom).removeClass('pair_on');
		});
		
  		//チェックがないときは「#paie_none」だけを表示
		if($('#fluits_list :checked').length == 0){  
  			$('#pair_none').fadeIn();
    	}
  
		var pair1 = $('#output_name1 .i').get(0).className.split(" ")[1];
		var pair2 = $('#output_name2 .i').get(0).className.split(" ")[1];
		var pair3 = ('pair_' + pair1 + pair2);
		if($('#fluits_list :checked').length == 2){
        	$('#' + pair3).addClass('pair_on');
        	//こうすれば水色の相性についての表示を１つにできると思ったのですが…
        	//$('.fluits-widget:first-of-type').removeClass('pair_on');
                //↑これだと.fluits-widget最初のものしか見なくなってしまいます。
                //さらにここに追加すると、常に２つチェックされている必要があります。
		}
	});

こうでしょうかね？

Comments

[退会済みユーザー]

こんばんは。ご回答ありがとうございます。さらにコメントまでつけて頂き感謝です。書く位置はなかなか難しいですね。

ご提示のようにしてほぼ理想の形になりました。どうもありがとうございます！

…あと、夜分に大変恐縮なのですが、、

//チェックがないときは「#paie_none」だけを表示

の部分については、どのように書けばいいのでしょうか？

これ、質問文に書いていなかったのですが、この機能にも不備がありました。すみません。（ご提示の形ですと、チェックがあるときにもこれが表示されてしまいまして、改めてお聞かせいただけませんでしょうか？）

お手すきの折に教えて頂ければ幸いでございます。

[icegreen]

if($('#fluits_list input:checked').length == 0) $('#pair_none').fadeIn();
１行にまとめていますが、$("#fluits_list :checked")ではなく、inputを付けて明確にしたらいいかと思います。

[退会済みユーザー]

たびたびありがとうございます。

…すみません。できないようすです。(>_<)
https://jsfiddle.net/tLv577fn/9/

[icegreen]

inputの後ろにスペースがあるからじゃないでしょうか？

[退会済みユーザー]

たびたび失礼しました。どうもありがとうございます。

Answer 2

	$('input[name=check_fluits]').change(function(){
  
  		//↓追加
	    $('.fluits-widget').removeClass('pair_on');
	    
	  	//チェックがないときは「#paie_none」だけを表示
			if($('#fluits_list :checked').length == 0){  
	  		$('#pair_none').fadeIn();
	    }
  
		var pair1 = $('#output_name1 .i').get(0).className.split(" ")[1];
		var pair2 = $('#output_name2 .i').get(0).className.split(" ")[1];
		var pair3 = ('pair_' + pair1 + pair2);
		if($('#fluits_list :checked').length == 2){
	        $('#' + pair3).addClass('pair_on');
	        
	        //こうすれば水色の相性についての表示を１つにできると思ったのですが…
	        $('.fluits-widget:first-of-type').removeClass('pair_on');
        
		}
	});
	

こうですか？