jquery - 如何使用 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