I would like to replace checkboxes with images however all I have come across are jQuery plugins. Is such a feature achievable in a few lines rather than a plugin?
Thanks.
3
-
With images that function as checkboxes or with static images for a read-only display?Jamie Ide– Jamie Ide2010-01-18 18:21:11 +00:00Commented Jan 18, 2010 at 18:21
-
1Why would you not want to use a plugin? This is not as simple of a thing to do as you would expect. You'll run into issues that the plugin devs have already ran into, so take advantage of their work and use it. If you find a bug, report it. Re-inventing the wheel can be fun at times, but it's usually a waste of time.Josh Stodola– Josh Stodola2010-01-18 18:24:46 +00:00Commented Jan 18, 2010 at 18:24
-
And another thing... The whole "few lines" argument is simply moot. I could scrunch a plugin into one line if I wanted to. That's not the point; it does not matter.Josh Stodola– Josh Stodola2010-01-18 18:25:58 +00:00Commented Jan 18, 2010 at 18:25
Add a comment
|
4 Answers
Here is my take, you need two images imgOn and imgOff for checked and unchecked states of check box. This needs ID attribute on each checkbox to be set to modify it on clicking on the image.
<ul>
<li><input type="checkbox" id="chk1" checked="checked"/> Check 01</li>
<li><input type="checkbox" id="chk2"/> Check 02</li>
</ul>
<script type="text/javascript">
var imgOn='imgOn.png';
var imgOff='imgOff.png';
$(function(){
$("input:checkbox").each(function(){
$(this).css("display","none");
if($(this).is(":checked")){
$(this).after($(document.createElement("img"))
.attr({src:imgOn,title:'Checkbox',id:$(this).attr("id")})
.addClass("chkBoxImg"));
}else{
$(this).after($(document.createElement("img"))
.attr({src:imgOff, title:'Checkbox',id:$(this).attr("id")})
.addClass("chkBoxImg"));
}});
$("img.chkBoxImg").click(function(){
i= "input#"+$(this).attr("id")+":checkbox";
alert($(i).attr("checked"));
s=$(this).attr("src");
if(s==imgOn){
$(this).attr("src",imgOff);
$(i).attr("checked",false);
}else{
$(this).attr("src",imgOn);
$(i).attr("checked",true);
}});
});
</script>
Comments
Check out the possibilities inherent with the function replaceWith()
http://docs.jquery.com/Manipulation/replaceWith
Not tested but try something like:
$("input:checkbox").replaceWith("<img src='MyImg.gif'>");
I'm pretty sure you'll be wanting more than this, but I suggest its a good starting point.
answered Jan 18, 2010 at 17:03
Mutation Person
30.6k18 gold badges102 silver badges166 bronze badges
Comments
Well, the problem is that you need to maintain the state of the psuedo-checkbox, just as if it were a real checkbox. There's no way you're going to be able to do with with just a few lines.
Comments
Why not put the images on top of the checkboxes, and then have them delegate all the "click" events? That way your checkboxes will still be there at form submission time.
You really should consider the usability aspects of forcing your users to recognize checkboxes that look different from checkboxes on other sites.
