javascript Jquery 使用图像作为复选框
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21628524/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Jquery Use Image As CheckBox
提问by Jones
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>
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.
我对 Jquery 比较陌生，我无法弄清楚我哪里出错了。任何帮助将不胜感激。
Thanks in advance :)
提前致谢 ：）
回答by Rakesh Kumar
Here is the solution of your question. I hope this will help you.
这是您问题的解决方案。我希望这能帮到您。
CSS
CSS
.checked {border:solid 2px red}
HTML Code
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 Code
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);
}
})
});
Working Example : Demo
工作示例：演示
回答by jave.web
Actually using image as checkbox can be done with HTML & CSS ONLY!
实际上使用图像作为复选框可以仅使用 HTML 和 CSS 完成！
The trick is to style a <label>element (make it an image) and add it a for="checkboxid"parameter - then just make a <checkbox>with a proper id="checkboxid"and hide it. When you click on label => the checkbox gets (un)checked. Also the usage of :checkedand +selector is good if you want to change label image on checked / unchecked.
诀窍是为<label>元素设置样式（使其成为图像）并为其添加for="checkboxid"参数 - 然后只需<checkbox>使用适当的方式创建id="checkboxid"并隐藏它。当您点击标签 => 复选框被（取消）选中。如果您想更改选中/未选中的标签图像，则:checked和+选择器的用法也很好。
HTML
HTML
<input id="checkboxid" type="checkbox" class="css-checkbox">
<label for="checkboxid" class="css-label"></label>
CSS
CSS
input[type=checkbox].css-checkbox{ display: none; }
.css-label{
display: inline-block;
padding-left:20px;
height:15px;
background-image:url(http://csscheckbox.com/checkboxes/dark-check-green.png);
background-repeat: no-repeat;
}
input[type=checkbox].css-checkbox:checked + label.css-label {
background-position: 0 -15px;
}
Fiddle - edited/simplified: http://jsfiddle.net/bdTX2/
小提琴 -编辑/简化：http: //jsfiddle.net/bdTX2/
Example took from: http://www.csscheckbox.com/
示例取自：http: //www.csscheckbox.com/
回答by Anton
Click doesn't work like that, you can't toggle two functions. You must use an if statement like this
Click 不是这样工作的，你不能切换两个功能。您必须使用这样的 if 语句
$('#blr').click(function () {
var chk = $('#imgCheck').get(0);
if (!chk.checked) {
$(this).css('border', 'solid 2px red');
$('#imgCheck').prop('checked', true);
} else {
$(this).css('border', 'none');
$('#imgCheck').prop('checked', false);
}
});
You could shorten the code even more like this
你可以更像这样缩短代码
$('#blr').click(function () {
var chk = $('#imgCheck').get(0);
$(this).css('border', !chk.checked?'solid 2px red':'none');
$('#imgCheck').prop('checked', !chk.checked);
});
回答by Shekhar Pankaj
The click Function doesn't work like what your thinking.... the way you are looking for is for Toggle Try this ..I think This Will help ..Cheers
点击功能不像你的想法那样工作......你正在寻找的方式是切换试试这个..我认为这会有所帮助..干杯
$('#blr').toggle(function () {
$("#blr").css('border', 'solid 2px red');
$('#imgCheck').prop('checked', false);
}, function () {
$('#blr').css('border', 'none');
$('#imgCheck').prop('checked', true);
});
回答by JAYBEkster
$('#blr').on('click', function(e) {
var $this = $(this),
$imgCheck = $(this).next().attr('checked'),
border_styles = ['solid 2px red', 'none']
is_checked = $imgCheck.attr('checked');
$this.css('border', border_styles[is_checked]);
$imgCheck.attr('checked', !is_checked);
})
回答by TheYaXxE
Another Solution for CSS-Only
仅 CSS 的另一种解决方案
Use -webkit-apperance: noneto 'hide' the original checkbox, and then style it as you want.
使用-webkit-apperance: none“隐藏”原来的复选框，然后风采吧，只要你想。
To style, when checkbox is checked, simple use this pseudo code: input[type="checkbox"]:checked
样式，当复选框被选中时，简单地使用这个伪代码： input[type="checkbox"]:checked
HTML
HTML
<input type="checkbox">
CSS
CSS
input[type="checkbox"] {
-webkit-appearance: none;
display: inline-block;
width: 20px;
height: 20px;
border: 1px solid gray;
outline: none;
cursor: pointer;
}
input[type="checkbox"]:checked {
background: url(http://2012.igem.org/wiki/images/7/79/Small-checkmark.png) center no-repeat;
}
