如何使用jquery为图像创建复选框

Question

我试图为图像创建一个复选框，如果我们有多个图像，我可以在继续前进之前选择3或4个图像。我见过这种事情，但我不知道如何使用jquery创建相同的东西。

例如，在此图片中，我想提供一个选项，如果有人点击图像，它就会被选中。用户可以选择这样的多个图像。是否可以使用jquery？或者是否有一个插件可以帮助我实现这一目标。

Answer 1

这可能足以满足您的需求。当然，您可以编辑脚本和CSS以便按照自己喜欢的方式进行设置：

$('.image-checkbox-container img').live('click', function(){
    if(!$(this).prev('input[type="checkbox"]').prop('checked')){
        $(this).prev('input[type="checkbox"]').prop('checked', true).attr('checked','checked');
        this.style.border = '4px solid #38A';
        this.style.margin =' 0';
    }else{
        $(this).prev('input[type="checkbox"]').prop('checked', false).removeAttr('checked');
        this.style.border = '0';
        this.style.margin = '4px';
    }
});

CSS：

.image-checkbox-container input[type="checkbox"]{
    display: none;
}

.image-checkbox-container img{
    border: 0;
    margin: 4px;
}

Here is a JSFIddle Example

Answer 2

许多可能的实现之一。在这里，我假设您事先生成了一个图像列表和相应的复选框（不是使用javascript）。

HTML（剪辑）：

<div id="selectable_images">
   <img src="/image1.jpg" rel="ch_image_1"/>
   <input style="display:none" type="checkbox" id="ch_image_1" value="image1.jpg"/>

   <img src="/image2.jpg" rel="ch_image_2"/>
   <input style="display:none" type="checkbox" id="ch_image_2" value="image2.jpg"/>

   <img src="/image3.jpg" rel="ch_image_3"/>
   <input style="display:none" type="checkbox" id="ch_image_3" value="image3.jpg"/>
</div>

JS（jQuery）：

$(function() {
    $("#selectable_images img").click(function() {
       var $this = $(this);
       if ($this.hasClass('selected')) {
           $("#"+this.rel).attr('checked', false);
           $this.removeClass('selected');
       } else {
           $("#"+this.rel).attr('checked', true);
           $this.addClass('selected');
       }
    })
}

通过单击相应的图像，将切换复选框。所选图像将被“选中”类。