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

尽管我尽可能简化了这些操作，但可能仍然最好先查看JSfiddle。 https://jsfiddle.net/27a8qypq/3/我首先在底部框上勾选了“欧洲国家”复选框，这样就出现了奥地利和西班牙。现在，如果我在TOP框中勾选'Europe ONLY'，我想要的是'奥地利'和'西班牙'标签&复选框从底部移动到TOP框。请注意，如果非洲国家的复选框也被打勾，那么'埃及'和'尼日利亚' 当然必须保持显示在底部框中。我还需要各国总是按字母顺序出现，无论他们在哪里。将复选框的选择从一个div移动到另一个div

经过许多失败的小时后，我的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; 
}

来源

2016-11-07 Silverburch

尽管您的问题描述很明确，但我无法看到您想要用您的用户界面完成什么。应该“只有欧洲”真的是一个复选框，或者说是一个按钮？如果它不是一个按钮，当您取消选中时会发生什么？为什么特定的国家也是复选框？有关设计注意事项的更多信息将有所帮助。 –

谢谢。我相信你可以想象，为了达到目的，我简化了一个更大的概念，以突出一个委托人（用户界面的概念是关于用户将区域组与各个国家的选择相结合的）。 “仅限欧洲”是一个复选框，因为当它没有被选中时，欧洲国家应该像以前一样回到底部框。我正在努力的原则是关于如何将这些国家跨越各个部门。另外，如果任何欧洲国家被勾选，那么在从一个分部移动到另一个分部时，这些蜱需要保持。 – Silverburch

您可以使用appendTo切割和DOM元素粘贴到另一个位置。请参阅fiddle，该文件显示了您的案例如何运作。

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

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

来源

2016-11-08 08:13:53

啊，现在我意识到我的想法完全走错了路。这很棒，非常感谢@czosel。 – Silverburch

@Silverburch很高兴我能帮忙！ –

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

回答

相关问题