Replacing checkboxes with images?

Question

I am trying to replace three check boxes within an html form with three different images. The idea being that the user can select the pictures by clicking on them rather than clicking on a check box. I've been putting togther some code but can't figure out how to make all the checkboxes selectable. At the moment only the first images works when it is clicked on. Can anyone help me? I'm a real novice with javascript I'm afraid. See fiddle here

The form

<form id="form1" action="" method="GET" name="form1">
<div class="col-md-3">
             <img src="https://cdn2.iconfinder.com/data/icons/windows-8-metro-style/128/unchecked_checkbox.png" title="blr" id="blr"><input type="checkbox" id="imgCheck"  name="pic1" value=9></div><div class="col-md-3">
             <img src="https://cdn2.iconfinder.com/data/icons/windows-8-metro-style/128/unchecked_checkbox.png" title="blr" id="blr"><input type="checkbox" id="imgCheck"  name="pic2" value=12></div><div class="col-md-3">
          <img src="https://cdn2.iconfinder.com/data/icons/windows-8-metro-style/128/unchecked_checkbox.png" title="blr" id="blr"><input type="checkbox" id="imgCheck"  name="pic3" value=7></div>
   <input type="submit" name="submit" value="Add" />
</div>
</form>

The javascript

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

Do you mean something like [this](http://i.imgur.com/USGYHJ2.png)? — Joel I, Apr 13 '15 at 21:49
Have you read this question and its answers: http://stackoverflow.com/questions/16352864/how-to-display-image-in-place-of-checkbox ? I'm tempted to close as a duplicate, but if you can explain why your question is different it may well stay open. — David Thomas, Apr 13 '15 at 21:51
id must be unique.if there's multipe elements with the same id, `$('#blr')`will return the first one only. — Omar Elawady, Apr 13 '15 at 21:52

score 2 · Answer 1 · answered Apr 13 '15 at 22:29

Why use JavaScript at all? You can do this with CSS, the :checked attribute and a label element.

input[type=checkbox] {
  display: none;
}

:checked+img {
  border: 2px solid red;
}

<label>
  <input type="checkbox" name="checkbox" value="value">
  <img src="http://lorempixel.com/50/50/" alt="Check me">
</label>

score 1 · Answer 2 · answered Apr 13 '15 at 21:51

1

This is happening because you're using the same ID more than one. IDs should be unique. Instead of using id="blr", try using class="blr". I updated the fiddle:

http://jsfiddle.net/0rznu4ks/1/

answered Apr 13 '15 at 21:51

Amar Syla

3,523
3
29
69

Notice that the checkboxes are doing the same thing. I was about to post the updated Fiddle as well. You'll need to correct so that each image doesn't check the same checkbox. – Marshall Davis Apr 13 '15 at 22:03
That's great but it seems that even though all the images can be selected only the first check box gets checked? – JulianJ Apr 13 '15 at 22:07
Just saw your comment after I posted. I shall have a go. Thanks. – JulianJ Apr 13 '15 at 22:08

score 0 · Accepted Answer · answered Apr 13 '15 at 22:19

First, as Amar said, id should be unique. Use classes for multiple elements. Also pay attention for semicolons and closing html tags.

To your question: use the function .siblings() to get the relevant checkbox element.

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

See demo here: http://jsfiddle.net/yd5oq032/1/

Good luck!

Replacing checkboxes with images?

3 Answers3

Linked