我试图用三个不同的图像替换 html 表单中的三个复选框。这个想法是用户可以通过单击图片来选择图片,而不是单击复选框。我已经将一些代码放在一起,但无法弄清楚如何使所有复选框都可选。目前,只有第一张图像在单击时才起作用。谁能帮我?恐怕我是一个真正的 javascript 新手。请参阅fiddle here
表格
<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>
JavaScript
$('#blr').on('click', function(){
var $$ = $(this)
if( !$$.is('.checked')){
$$.addClass('checked');
$('#imgCheck').prop('checked', true);
} else {
$$.removeClass('checked');
$('#imgCheck').prop('checked', false);
}
})
最佳答案
为什么要使用 JavaScript?您可以使用 CSS
、:checked
属性和 label
元素来完成此操作。
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>
关于javascript - 用图像替换复选框?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29615650/