ある部門から別の部門へのチェックボックスの選択の移動

Question

できるだけ簡略化しましたが、最初にJSfiddleを見てみるのが最も良いかもしれません。 https://jsfiddle.net/27a8qypq/3/まず、ボトムボックスにある「ヨーロッパの国」のチェックボックスをチェックして、オーストリアとスペインが表示されるようにします。今、トップボックスの「ヨーロッパのみ」にチェックを入れると、オーストリアとスペインのラベル&のチェックボックスがボトムからトップボックスに移動します。アフリカ諸国のチェックボックスにもチェックが入っていれば、もちろん「エジプト」と「ナイジェリア」 が下のボックスに表示されたままでなければならないことに注意してください。また、アルファベット順に表示する国が必要です。

多くの時間が経過してから、私のnoobieの脳は死んでしまいました。誰も助けることができますか？

//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js 
<label> 
    <input type="checkbox" name="colorCheckbox" id="EuropeONLY" /> 
    Europe ONLY 
</label> 

<div class="myTopBox"> 
    <label id="TextID" class="TextinTopBox">My European countries are...</label> 
</div> 
<br> 
<label> 
    <input type="checkbox" name="colorCheckbox" id="Europe" /> 
    European countries 
</label> 
<label> 
    <input type="checkbox" name="colorCheckbox" id="Africa" /> 
    African countries 
</label> 

<div class="myBottomBox"> 
    <label class="myEurope"> 
     <input type="checkbox" value="Spain"/> 
     Spain 
    </label> 
    <label class="myEurope"> 
     <input type="checkbox" value="Austria"/> 
     Austria 
    </label> 
    <label class="myAfrica"> 
     <input type="checkbox" value="Nigeria"/> 
     Nigeria 
    </label> 
    <label class="myAfrica"> 
     <input type="checkbox" value="Egypt"/> 
     Egypt 
    </label> 
</div> 

---

$(function() { 
    $('input[type="checkbox"]').click(function() { 
     if ($(this).attr("id") == "EuropeONLY") { 
      $(".TextinTopBox").slideToggle(200) 
     } 
    }); 
}); 

function sortByText(a, b) { 
    return $.trim($(a).text()) > $.trim($(b).text()); 
} 

var li = $(".myBottomBox").children("label").detach().sort(sortByText) 
$(".myBottomBox").append(li) 

$('input[type="checkbox"]').click(function() { 
    $('.my' + $(this).attr("id")).slideToggle(200) 
}); 

---

.myTopBox { 
    height: 100px; 
    width: 300px; 
    border: 1px solid green; 
} 

.TextinTopBox { 
    display: none; 
} 

.myBottomBox { 
    border: 1px solid blue; 
    height: 100px; 
    width: 300px; 
    border: 1px solid blue; 
} 

.myEurope { 
    display: none; 
} 
.myAfrica { 
    display: none; 
} 

Answer 1

あなたは別の場所にDOM要素をカット＆ペーストするappendToを使用することができます。あなたのケースでどのように動作するかを示すfiddleを参照してください。

$('input[type="checkbox"]').click(function() { 
    if ($(this).attr("id") == "EuropeONLY") { 
    var targetBox = $(this).prop("checked") ? '.myTopBox' : '.myBottomBox' 
    $('.myEurope').appendTo($(targetBox)) 
    } 
}); 

ソートはまだ必要ですが、フィドルがあなたを始めさせるのに十分であることを願っています。