Question

我尽可能地简化了，但最好还是先看看JSfiddle。 https://jsfiddle.net/27a8qypq/3/我首先勾选“欧洲国家/地区”复选框。在BOTTOM盒子上，奥地利和西班牙出现了。现在，如果我只打勾欧洲＆＃39;在TOP盒子上我想要的是奥地利＆＃39;和＆＃39;西班牙＆＃39;标签＆amp;复选框从BOTTOM移动到TOP框。请注意，如果还勾选了非洲国家的复选框，那么埃及＆＃39;和尼日利亚＆＃39; 当然必须显示在底部框中。我还需要国家/地区始终按字母顺序显示，无论它们在哪个方框中。

在经历了许多失败的时间之后，我的诺贝尔大脑已经死了。有人可以帮忙吗？

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

您可以使用appendTo将DOM元素剪切并粘贴到其他位置。请参阅fiddle，了解您的情况如何运作。

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

你还需要照顾的是排序，但我希望这个小提琴足以让你开始。

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

1 个答案: