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

时间:2013-09-17 12:02:50

标签: jquery checkbox clone

我遇到了将已检查元素从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>

JQUERY

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

已检查的元素将被覆盖,并且仅显示已检查的最后一个元素。

预期产量 检查过的元素及其兄弟姐妹应该一个接一个地显示出来。

3 个答案:

答案 0 :(得分:1)

<强> fiddle

$(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>

答案 1 :(得分:0)

<强> JQUERY

$(".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>

答案 2 :(得分:0)

中尝试此条件
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
}