Jquery 使用图像作为复选框
Posted
技术标签:
【中文标题】Jquery 使用图像作为复选框【英文标题】：Jquery Use Image As CheckBox 【发布时间】：2014-03-04 21:51:20 【问题描述】：我正在追求将图像实现为复选框。现在我正在尝试一个样本。 下面的代码包含一个简单的图像，旁边有一个提交按钮。单击提交按钮时，我希望图像在其周围形成边框，单击提交按钮时，我希望传递复选框值。
<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 比较陌生，我无法弄清楚我哪里出错了。任何帮助将不胜感激。
提前致谢:)
【问题讨论】：
注意：在处理属性值时应该使用 .prop() 而不是 .attr() 请在您的 html 中的适当位置添加<body> 和/或 <head> 标签
你可以使用纯 CSS 来设置复选框的样式
正如@TheYaXxE 所说，它只能使用 HTML 和 CSS 来完成 - 请查看我对仅 HTML 和 CSS 解决方案的回答
供以后参考，看看这个问题***.com/questions/30663562/use-images-like-checkboxes，既然你用的是jQuery，我就做个无耻的插件；看到这个插件：jcuenod.github.io/imgCheckbox
【参考方案1】：
这是您问题的解决方案。我希望这会对你有所帮助。
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);
)
);
工作示例：Demo
【讨论】：
多次点击图片，你会看到复选框没有被选中，你应该使用 .prop() jsfiddle.net/3u2Le/5 我看到演示是如何工作的，这正是我想要的。我刚刚复制并粘贴了您的代码，但没有得到所需的输出。我已经更改了图像源，但我无法弄清楚出了什么问题。 @Anton：感谢您的反馈...在我们多次点击图片后，它现在工作正常 @Rakesh Kumar jsfiddle.net/3u2Le/8 - 这是小提琴。它和你的一样。它在这里工作。我相信还有一些我不知道的更琐碎的事情。【参考方案2】：实际上使用图像作为复选框只能使用 HTML 和 CSS 来完成！
诀窍是设置<label> 元素的样式（使其成为图像）并为其添加for="checkboxid" 参数 - 然后只需使用适当的id="checkboxid" 制作<checkbox> 并隐藏它。当您单击标签 => 复选框被（取消）选中。如果您想在选中/未选中时更改标签图像，:checked 和 + 选择器的用法也很好。
HTML
<input id="checkboxid" type="checkbox" class="css-checkbox">
<label for="checkboxid" class="css-label"></label>
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;
小提琴 - 已编辑/简化：http://jsfiddle.net/bdTX2/
示例来自：http://www.csscheckbox.com/
【讨论】：
我喜欢这个解决方案，因为它不依赖于 JS。我在这个 JS Fiddle jsfiddle.net/coolwebs/bz5z5yhx/18 中将这个概念更进一步【参考方案3】：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);
);
DEMO
你可以像这样缩短代码
$('#blr').click(function ()
var chk = $('#imgCheck').get(0);
$(this).css('border', !chk.checked?'solid 2px red':'none');
$('#imgCheck').prop('checked', !chk.checked);
);
DEMO
【讨论】：
【参考方案4】：点击功能不像你的想法那样工作......你正在寻找的方式是切换试试这个..我认为这会有所帮助..干杯
$('#blr').toggle(function ()
$("#blr").css('border', 'solid 2px red');
$('#imgCheck').prop('checked', false);
, function ()
$('#blr').css('border', 'none');
$('#imgCheck').prop('checked', true);
);
【讨论】：
toggle(function(),function()) 在 1.8 中已弃用，并在 1.9 中删除 jquery.com/upgrade-guide/1.9/#toggle-function-function-removed
@Anton 谢谢..我无权 +1 这个问题..但应该给出因为学到了新东西..:)
答案还是正确的，但是东西被移除/弃用的功能要注意了。
是的..会记住这一点...@Anton【参考方案5】：
$('#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);
)
【讨论】：
【参考方案6】：仅 CSS
的另一种解决方案使用-webkit-apperance: none“隐藏”原始复选框，然后根据需要设置样式。
要设置样式，选中复选框时，只需使用以下伪代码：input[type="checkbox"]:checked
HTML
<input type="checkbox">
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;
Demo Fiddle
【讨论】：
以上是关于Jquery 使用图像作为复选框的主要内容，如果未能解决你的问题，请参考以下文章
如何使用 jQuery DataTables 和复选框作为行选择器访问列元素数据