HTML

Question

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

<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比较新，我无法弄清楚我哪里出错了。任何帮助将不胜感激。

提前致谢：）

Answer 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

Answer 2

实际上使用图像作为复选框可以使用HTML＆amp;仅限CSS ！

诀窍是设置<label>元素的样式（使其成为图像）并添加for="checkboxid"参数 - 然后只需使用适当的<checkbox>制作id="checkboxid"元素把它藏起来。当您点击label =＆gt;复选框得到（取消）检查。如果您想在选中/取消选中时更改标签图片，也可以使用: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/

Answer 3

点击不起作用，你不能切换两个功能。你必须使用像这样的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

Answer 4

点击功能不像您的想法那样......您正在寻找的方式是切换试试这个..我想这会有所帮助..车友

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

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

Answer 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

Jquery使用Image作为CheckBox

6 个答案:

HTML

CSS