1つ目と2つ目のチェックで、別の挙動をさせる方法

Question

###■目的
下記HTMLのようなチェックボックスがあるとき、

1つ目のチェック画像を、『１つだけ』ピンクの中にクローン

2つ目のチェック画像を、『１つだけ』水色の中にクローン

という機能をつけたいです。

<div class="check_wrap">	
  <ul class="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_grape" class="check_fluits" name="check_fluits" value="grape" type="checkbox">
      <label for="fluits_grape" class="check_label">
        <span class="i grape"></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">
  <p class="pink">1つ目のチェック画像を、１つだけピンクの中にクローン
  <span id="output1"></span></p>
  <p class="aqua">2つ目のチェック画像を、１つだけ水色の中にクローン
  <span id="output2"></span></p>
</div>

###■やってみたこと

欲しい機能は上述のとおり

1つ目のチェック画像を、『１つだけ』ピンクの中にクローン

2つ目のチェック画像を、『１つだけ』水色の中にクローン

なのですが、

下記のjavascriptだと、

1つ目のチェック画像を、『１つだけ』ピンクの中にクローン

2つ目のチェック画像を、『２つとも』水色の中にクローン

になってしまいました。

//チェックボックス２個まで制限
(function($){
  $('input[name=check_fluits]').click(function(){
    var checked = $('input[name=check_fluits]:checked').length;
    if (checked > 2) {
      $(this).prop("checked",false);
      alert('もうダメ！');
    }
  });
})(jQuery);


//チェックしたらクローン
(function($){
  $('input[name=check_fluits]').click(function(){
    var checked = $('input[name=check_fluits]:checked').parent().find(".i").clone();
    if($(checked).length == 1){
 	  	$('#output1').html(checked);  
    }
    if($(checked).length == 2){
 	  	$('#output2').html(checked);  
    }
  });
})(jQuery);

どうすれば目的の通りになるか、ご教示いただければと思い質問致しまいた。
よろしくお願いいたします。m(_ _)m

▼動くサンプル
https://jsfiddle.net/1te9teLs/11/

###■追記
具体的な条件を追記いたします。わかりにくくて申し訳ございません。

⓪ ：読み込み時
→リンゴとバナナをチェックし、ピンクにリンゴを、水色にバナナをクローンする。

① ：チェック１個目（０個から１個）
→そのチェック画像をピンクにクローンする。

② ：チェック２個目（１個から２個）
→①の画像はピンクにクローンされたまま。そして２個目の画像を水色にクローンする。

③ ：チェック１個削除（➁のチェックを消した場合）
→①の画像はピンクにクローンされたまま。そして水色から画像を消す。

③´：チェック１個削除（➀のチェックを消した場合）
→②の画像は水色にクローンされたまま。そしてピンクから画像を消す。

④チェック全削除（１個から０個）
→リンゴとバナナをチェックし、ピンクにリンゴを、水色にバナナをクローンする。 つまり⓪と同じ状態にする。

※このように、③と③´以外は、ピンクも水色も常に画像が１つずつある状態です。

Answer 1

仕様がちょっとおかしいのでまともなUIにならないですね
とくに、2個目をチェックしたあとに、外して再度別のチェックを
つけたりするとぼろぼろです

.pink{background-Color:pink;}
.aqua{background-Color:aqua;}

$(function(){
  $('input[name=check_fluits]').change(function(){
    var checked = $('input[name=check_fluits]:checked');
    switch(checked.length) {
    case 0:
      break;
    case 1:
      $('#output1').html($(this).prop('checked')?$(this).siblings().find('.i').clone():"");  
      break;
    case 2:
      $('#output2').html($(this).prop('checked')?$(this).siblings().find('.i').clone():"");  
      break;
    default:
      $(this).prop("checked",false);
      alert('もうダメ！');
      break;
    }
  });
});

<div class="check_wrap">    
  <ul class="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">1</span>
      </label>
    </li>
    <li><input id="fluits_grape" class="check_fluits" name="check_fluits" value="grape" type="checkbox">
      <label for="fluits_grape" class="check_label">
        <span class="i grape">2</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">3</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">4</span>
      </label>
    </li>
  </ul>        
</div>


<div class="output">
  <p class="pink">1つ目のチェック画像を、１つだけピンクの中にクローン
  <span id="output1"></span></p>
  <p class="aqua">2つ目のチェック画像を、１つだけ水色の中にクローン
  <span id="output2"></span></p>
</div>

改訂版

ざっと仕様を入れ込んでみました
もう少しスマートにできそうですがとりあえず動くとは思います

.pink{background-Color:pink;}
.aqua{background-Color:aqua;}

$(function(){
  $('input[name=check_fluits]').change(function(){
    var clone=$(this).siblings().find('.i>img').clone();
    if($('input[name=check_fluits]:checked').length>2) {
      $(this).prop("checked",false);
      alert('もうダメ！');
      return false;
    }
    if($(this).prop('checked')){
      $('#output1,#output2').filter(function(){
        return $(this).html()=="";
      }).eq(0).html(clone);
    }else{
      $('#output1,#output2').has('img[src="'+clone.attr('src')+'"]').html("");
    }
  });
  $('input[name=check_fluits]').prop('checked',false).filter('[value=apple],[value=banana]').prop('checked',true).trigger("change");
});

<div class="check_wrap">
  <ul class="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"><img src="apple.jpg" alt="りんご"></span>
      </label>
    </li>
    <li><input id="fluits_grape" class="check_fluits" name="check_fluits" value="grape" type="checkbox">
      <label for="fluits_grape" class="check_label">
        <span class="i grape"><img src="grape.jpg" alt="ぶどう"></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"><img src="banana.jpg" alt="バナナ"></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"><img src="kiwi.jpg" alt="キウイ"></span>
      </label>
    </li>
  </ul>
</div>


<div class="output">
  <p class="pink">1つ目のチェック画像を、１つだけピンクの中にクローン
  <span id="output1"></span></p>
  <p class="aqua">2つ目のチェック画像を、１つだけ水色の中にクローン
  <span id="output2"></span></p>
</div>

imgを使わない

ちょっと誤解していました、あくまでspanのみで画像を処理しているのですね
ではこんな感じで
※今回はとりあえずcssにはbackground-colorを入れておきます

.pink{background-Color:pink;}
.aqua{background-Color:aqua;}
.i{display:block;border:1px solid;height:100px;width:100px;}
.apple{background-Color:red;}
.grape{background-Color:fuchsia;}
.banana{background-Color:yellow;}
.kiwi{background-Color:lime;}

$(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')){
      $('#output1,#output2').filter(function(){
        return $(this).html()=="";
      }).eq(0).html(clone);
    }else{
      console.log($.map(clone.prop('classList'),function(x){return "."+x;}).join(""));
      //console.log(clone.prop('classList').map(function(){return "."+$(this);}));
      $('#output1,#output2').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");
});

<div class="check_wrap">
  <ul class="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_grape" class="check_fluits" name="check_fluits" value="grape" type="checkbox">
      <label for="fluits_grape" class="check_label">
        <span class="i grape"></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">
  <p class="pink">1つ目のチェック画像を、１つだけピンクの中にクローン
  <span id="output1"></span></p>
  <p class="aqua">2つ目のチェック画像を、１つだけ水色の中にクローン
  <span id="output2"></span></p>
</div>

Comments

[退会済みユーザー]

yambejpさん、こんばんは。いつもありがとうございます。

>まともなUIにならない
おっしゃるとおりですね。でも質問へのご回答だとそうなってしまいますもんね。大変失礼いたしました。m(_ _)m

具体的な条件を追記しておきました。
もし気が向いたらまたご意見頂戴できましたら幸いです。

[yambejp]

(0)読み込み時
→ピンクにリンゴを、水色にバナナをクローンする。
が、まずいですね
読み込み時はピンクもバナナも空じゃないと、1個チェックした時に
#output2に選択していないデータが表示されるのが整合性がとれない

もしくは初期状態で、りんごとバナナのチェックをいれるかの
どちらかがだ妥当

[退会済みユーザー]

仰るとおりですね!!どうして当人より分かるのですか。。笑
後者の「初期状態で、りんごとバナナのチェックをいれる」が理想とする機能でした。
質問文をそのように修正しておきます。
いつもご指導、ご指摘、どうもありがとうございます。

[退会済みユーザー]

おはようございます。ほぼ理想通りにして頂き、誠にありがとうございますっ!!

あの、大変恐縮なのですが、画像はそのようにHTML側に入力しなければならないでしょうか？

たとえば下記のようにCSSのbeforeを取得して、というのは難しいのでしょうか？（下記だと .i の[0]でなきゃ取得できないようで、悩んでいます。）

var property = window.getComputedStyle($('.i')[0], '::before').getPropertyValue('background-image');

output1や2のHTMLは変わっても大丈夫なのですが、チェックボックスの
HTMLが変わるとなると…、実は数百個のチェックックスがあるのでﾁｮｯﾄ大変そうでして。笑

[yambejp]

ちょっとソースの理解がたりなかったようですみません
imgを直接うめこまないバージョンをアップしてあります
さらに仕様が違うようであれば再度指摘下さい

[退会済みユーザー]

yambejpさん、こんばんは。お世話になっております。

バージョンアップ！どうもありがとうございます。ばっちり理想としていた機能になっています。

読みにくく分かりにくい質問への追記について、これほどにご丁寧にご教示いただき、まことにありがとうございます。