jquery - 将选中的复选框元素克隆到 Jquery 中的另一个 div

Question

我在将选中的元素从 div 克隆到另一个 div 时遇到问题。我能够获得选中的元素，但并非所有元素都附加。这是我的代码

HTML

<section class="BusinessSelection">
     <p>
        <input  type="checkbox" class="checkedList">
        <span class="BuIcon"></span>
        <span>Business Unit 1</span>
     </p>
     <p>
        <input  type="checkbox" class="checkedList">
        <span class="BuIcon"></span>
        <span>Business Unit 2</span>
     </p>
</section>

查询

 var checkbox=$(this).find('.checkedList:checked');
    if(checkbox.attr('checked'))
    {
        var htmlcode=checkbox.parent().clone();
        ($('#dispbusiness').html(htmlcode));
    }
});

被检查的元素被覆盖，只有最后一个被检查的元素被显示。

预期的输出检查元素及其兄弟元素应显示在另一个下方。

Answer 1

小提琴

$(document).on('click', 'input:checkbox',function(){ 
    if($(this).is(':checked'))
    {
       var htmlcode=$(this).parents('section').clone();
       $('#dispbusiness').html(htmlcode);
    }
});


<section class="BusinessSelection">
 <p>
    <input  type="checkbox" class="checkedList">
    <span class="BuIcon"></span>
    <span>Business Unit 1</span>
 </p>
 <p>
    <input  type="checkbox" class="checkedList">
    <span class="BuIcon"></span>
    <span>Business Unit 2</span>
 </p>
</section>

     <div id="dispbusiness"></div>

Answer 2

如果在里面试试这个条件

if(checkbox.is(':checked')) // this will condition return boolean true or false
{
    //yourcode
}

或者你可以使用

if(checkbox.attr('checked')=="checked") // this condition will return string 'checked' or 'undefined'
{
    //yourcode
}

Answer 3

查询

$(".checkedList").change(function(){
    var container=$(this)closest('section');
    var chkList=$(".checkedList",container).is(":checked");
    var result="";
    chkList.each(function(){
         result += $(this).innerHTML();
    });
    $(".BusinessSelectionSelected").innerHTMl=result;
});

HTML

<section class="BusinessSelection">
 <input  type="checkbox" class="checkedList">pamm</input>
         <input  type="checkbox" class="checkedList">pamm1</input>
         <span class="BuIcon"></span>
         <span>Business Unit 1</span>
</section>
<section class="BusinessSelectionSelected">

</section>