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);
}
})
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!
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments