【问题标题】：Jquery Use Image As CheckBoxJquery 使用图像作为复选框
【发布时间】：2014-03-04 21:51:20
【问题描述】：

我正在追求将图像实现为复选框。现在我正在尝试一个样本。下面的代码包含一个简单的图像，旁边有一个提交按钮。单击提交按钮时，我希望图像在其周围形成边框，单击提交按钮时，我希望传递复选框值。

<html>
<script>
$(document).ready(function() {

    $('#blr').click(
        function(){
            $('#blr').css('border', 'solid 2px red');
            $('#imgCheck').attr('checked', 'checked');
        },
        function(){
            $('#blr').css('border', 'none');
            $('#imgCheck').removeAttr('checked');
        }
    );
});
</script>

<form id="form1">
    <img src="icons/blr.jpg" title="blr" id="blr" />
    <input type="checkbox" id="imgCheck" name="imgCheck" value="barney" style="visibility: hidden;" />
    <input type="submit" value="Submit" />
</form>
</html>

我对 Jquery 比较陌生，我无法弄清楚我哪里出错了。任何帮助将不胜感激。

提前致谢:)

【问题讨论】：

注意：在处理属性值时应该使用 .prop() 而不是 .attr()
请在您的 html 中的适当位置添加 <body> 和/或 <head> 标签
你可以使用纯 CSS 来设置复选框的样式
正如@TheYaXxE 所说，它只能使用 HTML 和 CSS 来完成 - 请查看我对仅 HTML 和 CSS 解决方案的回答
供以后参考，看看这个问题stackoverflow.com/questions/30663562/use-images-like-checkboxes，既然你用的是jQuery，我就做个无耻的插件；看到这个插件：jcuenod.github.io/imgCheckbox

标签： javascript jquery html checkbox

【解决方案1】：

这是您问题的解决方案。我希望这会对你有所帮助。

CSS

.checked {border:solid 2px red}

HTML 代码

<form id="form1">
    <img src="https://cdn2.iconfinder.com/data/icons/windows-8-metro-style/128/unchecked_checkbox.png" title="blr" id="blr" class="" />
    <input type="checkbox" id="imgCheck" name="imgCheck" value="barney" />
    <input type="submit" value="Submit" />
</form>

jQuery 代码

$(document).ready(function() {

    $('#blr').on('click', function(){
        var $$ = $(this)
        if( !$$.is('.checked')){
            $$.addClass('checked');
            $('#imgCheck').prop('checked', true);
        } else {
            $$.removeClass('checked');
            $('#imgCheck').prop('checked', false);
        }
    })

});

工作示例：Demo

【讨论】：

多次点击图片，你会看到复选框没有被选中，你应该使用 .prop() jsfiddle.net/3u2Le/5
我看到演示是如何工作的，这正是我想要的。我刚刚复制并粘贴了您的代码，但没有得到所需的输出。我已经更改了图像源，但我无法弄清楚出了什么问题。
@Anton：感谢您的反馈...在我们多次点击图片后，它现在工作正常
@Rakesh Kumar jsfiddle.net/3u2Le/8 - 这是小提琴。它和你的一样。它在这里工作。我相信还有一些我不知道的更琐碎的事情。

【解决方案2】：

实际上使用图像作为复选框只能使用 HTML 和 CSS 来完成！

诀窍是设置<label> 元素的样式（使其成为图像）并为其添加for="checkboxid" 参数 - 然后只需使用适当的id="checkboxid" 制作<checkbox> 并隐藏它。当您单击标签 => 复选框被（取消）选中。如果您想在选中/未选中时更改标签图像，:checked 和 + 选择器的用法也很好。

HTML

<input id="checkboxid" type="checkbox" class="css-checkbox">
<label for="checkboxid" class="css-label"></label>

CSS

input[type=checkbox].css-checkbox{ display: none; }
.css-label{
    display: inline-block;
    padding-left:20px;
    height:15px;
    background-image:url(http://csscheckbox.com/checkboxes/dark-check-green.png);
    background-repeat: no-repeat;
}
input[type=checkbox].css-checkbox:checked + label.css-label {
    background-position: 0 -15px;
}

小提琴 - 已编辑/简化：http://jsfiddle.net/bdTX2/

示例来自：http://www.csscheckbox.com/

【讨论】：

我喜欢这个解决方案，因为它不依赖于 JS。我在这个 JS Fiddle jsfiddle.net/coolwebs/bz5z5yhx/18 中将这个概念更进一步

【解决方案3】：

Click 不能这样工作，你不能切换两个功能。您必须使用这样的 if 语句

$('#blr').click(function () {
    var chk = $('#imgCheck').get(0);
    if (!chk.checked) {
        $(this).css('border', 'solid 2px red');
        $('#imgCheck').prop('checked', true);
    } else {
        $(this).css('border', 'none');
        $('#imgCheck').prop('checked', false);
    }
});

DEMO

你可以像这样缩短代码

$('#blr').click(function () {
    var chk = $('#imgCheck').get(0);
        $(this).css('border', !chk.checked?'solid 2px red':'none');
        $('#imgCheck').prop('checked', !chk.checked);
});

DEMO

【讨论】：

【解决方案4】：

点击功能不像你的想法那样工作......你正在寻找的方式是切换试试这个..我认为这会有所帮助..干杯

$('#blr').toggle(function () {
    $("#blr").css('border', 'solid 2px red');
    $('#imgCheck').prop('checked', false);
}, function () {
    $('#blr').css('border', 'none');
$('#imgCheck').prop('checked', true);
});

【讨论】：

toggle(function(){},function(){}) 在 1.8 中已弃用，并在 1.9 中删除 jquery.com/upgrade-guide/1.9/#toggle-function-function-removed
@Anton 谢谢..我无权 +1 这个问题..但应该给出因为学到了新东西..:)
答案还是正确的，但是东西被移除/弃用的功能要注意了。
是的..会记住这一点...@Anton

【解决方案5】：

$('#blr').on('click', function(e) {
    var $this = $(this),
        $imgCheck = $(this).next().attr('checked'),
        border_styles = ['solid 2px red', 'none']
        is_checked = $imgCheck.attr('checked');
    $this.css('border', border_styles[is_checked]);
    $imgCheck.attr('checked', !is_checked);
})

【讨论】：

【解决方案6】：

仅 CSS

的另一种解决方案

使用-webkit-apperance: none“隐藏”原始复选框，然后根据需要设置样式。

要设置样式，选中复选框时，只需使用以下伪代码：input[type="checkbox"]:checked

HTML

<input type="checkbox">

CSS

input[type="checkbox"] {
    -webkit-appearance: none;
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 1px solid gray;
    outline: none;
    cursor: pointer;
}

input[type="checkbox"]:checked {
    background: url(http://2012.igem.org/wiki/images/7/79/Small-checkmark.png) center no-repeat;
}

Demo Fiddle

【讨论】：