Search code examples
javascriptjqueryappendclone

how to clone an element when choosing a checkbox

I have a page with elements

<div class="sample-area-wrapper border-bottom-block">
    <div class="samples-items-wrapper">
        <div class="sample-item-wrapper">
            <img src="<?php echo $this->getViewFileUrl('Dv_BuildingBedPage::images/image1.png'); ?>" />
            <div class="pretty p-default">
                <input type="checkbox" />
                <div class="state">
                    <label></label>
                </div>
            </div>
        </div>
        <div class="sample-item-wrapper">
            <img src="<?php echo $this->getViewFileUrl('Dv_BuildingBedPage::images/image1.png'); ?>" />
            <div class="pretty p-default">
                <input type="checkbox" />
                <div class="state">
                    <label></label>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="selected-items"></div>

Help implement the functionality. if selected,

<input type="checkbox" />

copy the sample-item-wrapper entire block and add it to

selected-items

suitable implementation on knockout and jquery

I tried this but it failed. I was looking for many more other ways that I tried to integrate with my code, but nothing worked

<div class="selected">

</div>

<script>
    require([
        'jquery'
    ], function ($) {
        'use strict';
        $(":checkbox").change(function() {
            var arr = $(":checkbox:checked").map(function() { return $(this).next().html(); }).get();
            $(".selected").html(arr.join(', '));
        });

        function ToggleBGColour(item) {
            var td = $(item).parent();
            if (td.is('.rowSelected'))
                td.removeClass("rowSelected");
            else
                td.addClass("rowSelected");
        }

    });
</script>

this work but add the wrong element to block enter image description here

enter image description here

Solution

  • You can use closestmethod to get the content and simply use .html to append the content to the selected section.

    You can use clone method to get the whole element.

    EDIT

    Here you can add some identifier (e.g. is) to the div to identify and remove the selected items from the bottom section.

    As there is no identifier here in your case, I have used image URL to uniquely identify and remove element on uncheck event of the checkbox.

    $('input[type="checkbox"]').click(function(){
            if($(this).prop("checked") == true){
                $(".selected-items").append(($(this).closest(".sample-item-wrapper").clone()))
            }
            else if($(this).prop("checked") == false){
                var selected_item = $(this).closest(".sample-item-wrapper").attr('data-sample-id');
$("div.selected-items div[data-sample-id='"+selected_item+"']").remove()
            }
        });
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="sample-area-wrapper border-bottom-block">
    <div class="samples-items-wrapper">
        <div class="sample-item-wrapper" data-sample-id="sample-1">
            <img src="https://i.picsum.photos/id/237/200/300.jpg" />
            <div class="pretty p-default">
                <input type="checkbox" />
                <div class="state">
                    <label></label>
                </div>
            </div>
        </div>
        <div class="sample-item-wrapper" data-sample-id="sample-2">
            <img src="https://i.picsum.photos/id/866/200/300.jpg" />
            <div class="pretty p-default">
                <input type="checkbox" />
                <div class="state">
                    <label></label>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="selected-items"></div>