jQuery checkbox gallery select

Question

How can I create a JQuery function for the following?

When I checked the images I want to click the button and copy that images to another for working with that selected images.

Here is the sample I made, but it's not working good:

            $(document).ready(function () {
                $('input[name="obrazky"]').click(function () {
                    getSelectedCheckBoxes('obrazky');
                });

                var getSelectedCheckBoxes = function () {
                    var result = $('input[name="obrazky"]:checked');
                    if (result.length > 0) {
                        var resultString = result.length + " checkbox checked<br/>";
                        result.each(function () {
                            var selectedValue = $(this).val();
                            resultString += selectedValue + " - "
                                + $('label[class="obrazek' + selectedValue + '"]').html() + "<br>";
                        });
                        $('#showselected').html(resultString);
                    }
                    else {
                        $('#showselectedk').html("No checkbox checked");
                    }
                };
            });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label class="obrazek1"><input type="checkbox" name="obrazky" class="filled-in" value="1"><span></span><img alt="" height="100" width="100" src="https://tvorbawebu.net/eshopserver/uploads/Pentair-Led-Pool-Lights.jpg"></label>   
       <label class="obrazek2"><input type="checkbox" name="obrazky" class="filled-in" value="2"><span></span><img alt="" height="100" width="100" src="https://tvorbawebu.net/eshopserver/uploads/f823888da14805caf9a229986595f06c.jpg"></label>
       <label class="obrazek3"><input type="checkbox" name="obrazky" class="filled-in" value="3"><span></span><img alt="" height="100" width="100" src="https://tvorbawebu.net/eshopserver/uploads/Downunda-perimeter-overflow-pool-raised-spa-fire-bowls_490.jpg"></label>
       

        <div id="showselected"></div>

I wanna make like Wordpress files library, where you can choice your file and put in the main post thumbnail.

Thank you for help.

Answer 1

JS:

    $(document).ready(function () {
        $('input[name="obrazky"]').click(function () {
            getSelectedCheckBoxes('obrazky');
        });

        var getSelectedCheckBoxes = function () {
            var result = $('input[name="obrazky"]:checked');
            if (result.length > 0) {
                var resultString = result.length + " checkbox checked<br/>";
                result.each(function () {
                    var selectedValue = $(this).val(),
                        $lbl = $('label[class="obrazek' + selectedValue +'"] img');
                    resultString += selectedValue + " - " + $lbl.clone().wrap('<div/>').parent().html() + "<br>";
                        
                });
                $('#showselected').html(resultString);
            }
            else {
                $('#showselected').html("No checkbox checked");
            }
        };
    });

Working fiddle: https://jsfiddle.net/tnLymacq/