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

Question

我试图创建一个图片的复选框，以便在继续前可以选择3或4张图片。我看过这种东西，但不知道如何使用jquery创建相同的复选框。

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

- Pranay Airan

---

谷歌搜索 jquery 图片复选框 给了我一些有希望的结果。它们不适用于你吗？ - Pekka

这将完全取决于您的意图。当然，您可以添加复选框。但是，如果不知道页面结构、需要动态的内容以及您打算如何处理信息，这里就没有什么问题了。 - Sinetheta

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

- Paul

---

由于JavaScript 1.9版本起已停用.live()调用，所以在现代环境中使用时需将.live替换为.on。一旦发现问题很容易解决，但我被卡了好一会儿。 - Jeremy Young

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

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

- WTK