CODEWITHSUNDEEP
jquerycheckboxclone
Manasa Neelavar
Manasa Neelavar

Reputation: 43

Clone checked checkbox elements to another div in Jquery

I am facing a problem in cloning the checked elements from a div to another div. I am able to get the checked elements but not all the elements are appending. Here is my code

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));
    }
});

the checked elements are overriding and only the last element checked is getting displayed.

expected output checked elements along with their siblings should be displayed one below the other.

Upvotes: 1

Views: 4158

Answers (3)

Sohil Desai
Sohil Desai

Reputation: 2988

try this condition inside if

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

or you can use

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

Upvotes: 0

Pragnesh Chauhan
Pragnesh Chauhan

Reputation: 8476

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>

Upvotes: 1

paramjeet singh
paramjeet singh

Reputation: 165

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>

Upvotes: 0

Related Questions