I am in pursuit of implementing images as checkboxes. For now I am trying out a sample. The code below contains a simple image with a submit button next to it. On clicking the submit button I want the image to develop a border around it and on clicking the submit button, I want the checkbox value to be passed.

<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>

I am relatively new to Jquery and I am not able to figure out where am I going wrong. Any help will be greatly appreciated.

Thanks in advance :)

标签： javascript jquery html checkbox

6条回答

趁早两清

2楼-- · 2020-03-07 06:48

Actually using image as checkbox can be done with HTML & CSS ONLY!

The trick is to style a <label> element (make it an image) and add it a for="checkboxid" parameter - then just make a <checkbox> with a proper id="checkboxid" and hide it. When you click on label => the checkbox gets (un)checked. Also the usage of :checked and + selector is good if you want to change label image on checked / unchecked.

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

Fiddle - edited/simplified: http://jsfiddle.net/bdTX2/

Example took from: http://www.csscheckbox.com/

0人赞添加讨论(0) 举报

太酷不给撩

3楼-- · 2020-03-07 06:52

The click Function doesn't work like what your thinking.... the way you are looking for is for Toggle Try this ..I think This Will help ..Cheers

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

0人赞添加讨论(0) 举报

smile是对你的礼貌

4楼-- · 2020-03-07 06:56

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

0人赞添加讨论(0) 举报

爷、活的狠高调

5楼-- · 2020-03-07 06:59

Another Solution for CSS-Only

Use -webkit-apperance: none to 'hide' the original checkbox, and then style it as you want.

To style, when checkbox is checked, simple use this pseudo code: 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

0人赞添加讨论(0) 举报

forever°为你锁心

6楼-- · 2020-03-07 07:01

Here is the solution of your question. I hope this will help you.

CSS

.checked {border:solid 2px red}

HTML Code

<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 Code

$(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);
        }
    })

});

Working Example : Demo

0人赞添加讨论(0) 举报

叛逆

7楼-- · 2020-03-07 07:06

Click doesn't work like that, you can't toggle two functions. You must use an if statement like this

$('#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

You could shorten the code even more like this

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

DEMO

0人赞添加讨论(0) 举报

Jquery Use Image As CheckBox

HTML

CSS

采纳回答

编辑标签

举报内容

检举类型

检举原因

检举说明(必填)

打开微信“扫一扫”，打开网页后点击屏幕右上角分享按钮

付费偷看金额在0.1-10元之间