Jquery使用图像作为复选框 [英] Jquery Use Image As CheckBox
本文介绍了Jquery使用图像作为复选框的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在追求将图片实现为复选框。现在我正在尝试一个样本。
下面的代码包含一个简单的图像，旁边有一个提交按钮。在点击提交按钮，我想让图像在它周围开发一个边框，点击提交按钮，我想复选框的值被传递。
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>
我对Jquery比较陌生，我不知道我会出错。
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.
提前感谢：）
推荐答案
p>这里是你的问题的解决方案。我希望这会帮助你。
Here is the solution of your question. I hope this will help you.
CSS
.checked {border:solid 2px red}
HTML代码
<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代码
$(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);
}
})
});
工作范例：演示
这篇关于Jquery使用图像作为复选框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
