将复选框的选择从一个div移动到另一个

Question

I've simplified as much as I can, but might still be best to take a look at JSfiddle first. https://jsfiddle.net/27a8qypq/3/ I start by ticking the checkbox'European countries' on the BOTTOM box, so that Austria and Spain appear. Now, if I tick 'Europe ONLY' on the TOP box what I want is for 'Austria' and 'Spain' labels & checkboxes to move from the BOTTOM up to the TOP box. Note that if the African countries checkbox had also been ticked, then 'Egypt' and 'Nigeria' must of course remain displayed in the bottom box. I also need countries to always appear in alphabetical order, whichever box they are in.

After many failed hours on this my noobie brain's gone dead. Can anyone help?

//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

You can use appendTo to cut and paste a DOM element to another location. See the fiddle that shows how that works for your case.

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

What you'll still need to take care of is the sorting, but i hope the fiddle is enough to get you started.