Jquery Use Image As CheckBox

Question

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 t

Answer 1

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

Answer 2

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/

Answer 3

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

Answer 4

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

Answer 5

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

Answer 6

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