Jon*_*nes 1 html javascript checkbox jquery
我正在追求实现图像作为复选框.现在我正在尝试一个样本.下面的代码包含一个简单的图像,旁边有一个提交按钮.在单击提交按钮时,我希望图像围绕它开发边框,并在单击提交按钮时,我希望传递复选框值.
<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比较新,我无法弄清楚我哪里出错了.任何帮助将不胜感激.
提前致谢 :)
这是你的问题的解决方案.我希望这能帮到您.
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);
}
})
});
工作示例:演示