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

**Note:** You should use .prop() instead of .attr() when working with property values — Anton, Feb 07 '14 at 13:04
Please add `` and/or `` tags at appropriate places in your html — Vivek Jain, Feb 07 '14 at 13:08
as @TheYaXxE said it can be done with HTML&CSS only - **please check my answer for HTML&CSS only solution** — jave.web, Feb 07 '14 at 13:58
For future reference, take a look at this question http://stackoverflow.com/questions/30663562/use-images-like-checkboxes and, since you're using jQuery, I'll do a shameless plug; see this plugin: https://jcuenod.github.io/imgCheckbox/ — jcuenod, Jul 08 '15 at 10:23

Rakesh Kumar · Accepted Answer · 2014-02-07T14:37:20.913

5

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

edited Feb 07 '14 at 14:37

answered Feb 07 '14 at 13:38

Rakesh Kumar

2,705
1
19
33

1

Click the image multiple times and you'll see the checkbox is not getting checked, you should use .prop() http://jsfiddle.net/3u2Le/5/ – Anton Feb 07 '14 at 14:08
I see how the demo is working and it is exactly what I want. I have just copied and pasted your code and yet I am not getting the desired output. I have changed the image source but I am not able to figure out what has gone wrong. – Jones Feb 07 '14 at 14:37
@Anton: Thanks for your feedback...It's working fine now after muliple times we clicked on image – Rakesh Kumar Feb 07 '14 at 14:38
@Rakesh Kumar http://jsfiddle.net/3u2Le/8/ - This is the fiddle. Its just the same as yours. Its working here. I believe there is something more trivial that I am unaware of. – Jones Feb 09 '14 at 05:42

score 3 · Answer 2 · edited Feb 07 '14 at 18:07

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/

I do like this solution as it does not rely on JS. I took the concept a bit further in this JS Fiddle http://jsfiddle.net/coolwebs/bz5z5yhx/18/ — Ryan Coolwebs, Apr 01 '15 at 05:35

Anton · Answer 3 · 2014-02-07T13:10:55.867

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

score 0 · Answer 4 · answered Feb 07 '14 at 13:17

0

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

answered Feb 07 '14 at 13:17

Shekhar Pankaj

9,065
3
28
46

`toggle(function(){},function(){})` is deprecated in 1.8 and removed in 1.9 http://jquery.com/upgrade-guide/1.9/#toggle-function-function-removed – Anton Feb 07 '14 at 13:21
@Anton Thanks.. i don't have right to +1 this question ..but it should be given because learned a new thing..:) – Shekhar Pankaj Feb 07 '14 at 13:27
The answer is still correct, but the thing is removed/deprecated functions should be noted. – Anton Feb 07 '14 at 13:28
1

yeah..will keep that in Mind...@Anton – Shekhar Pankaj Feb 07 '14 at 13:31

score 0 · Answer 5 · answered Feb 07 '14 at 13:41

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

score 0 · Answer 6 · answered Feb 07 '14 at 14:26

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

Jquery Use Image As CheckBox

6 Answers6

HTML

CSS

Linked