jQuery 复选框库 select

Question

如何为以下内容创建 JQuery 函数？

当我检查图像时，我想单击按钮并将该图像复制到另一个以处理所选图像。

这是我制作的示例，但效果不佳：

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

我想制作类似 Wordpress 的文件库，您可以在其中选择文件并放入主 post 缩略图。

感谢您的帮助。

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

工作fiddle： https://jsfiddle.net/tnLymacq/

jQuery 复选框库 select

jQuery checkbox gallery select

checkbox

jquery

select

gallery