Image custom checkboxes [Archive]

View Full Version : Image custom checkboxes

vorl

04-06-2005, 01:32 AM

Hiya

I was wondering if it was possible to replace checkboxes with images. I would like the images to be customizable and specific to certain checkboxes on the same form. Not sure if this should be in the javascript area but is this possible? Any help appreciated!!

Thanks :thumbsup:

vorl

glenngv

04-06-2005, 04:49 AM

Script:
function checkUncheck(oImg, sChkId){
var oChk = document.getElementById(sChkId);
oChk.checked = !oChk.checked;
oImg.src = (oChk.checked) ? "check.gif" : "unchecked.gif";
}

HTML:
<img src="uncheck.gif" onclick="checkUncheck(this, 'chk')" /><input type="checkbox" id="chk" name="chk" style="display:none" value="1" />Item 1
<img src="uncheck.gif" onclick="checkUncheck(this, 'chk2')" /><input type="checkbox" id="chk2" name="chk2" style="display:none" value="1" />Item 2

When the form is submitted the hidden checkboxes can still be accessed normally by the server-side code.

vwphillips

04-06-2005, 07:58 AM

see

http://homepage.ntlworld.com/vwphillips/ImageCheckBox/ImageCheckBox.htm

vorl

04-06-2005, 01:09 PM

hi glenngv

thanks for the reply!! Sorry i am new to javascript and do not know much!!Could u tell me which variables do i change to change the images? Also do you know what the cross browser suppport for this script is?

Thanks for the help

Vorl

glenngv

04-07-2005, 01:46 AM

Just change all occurrences of "uncheck.gif" and "check.gif" to your appropriate images. I have not tested the code but I know this supports all modern browsers.

vorl

04-07-2005, 02:10 AM

hiya thanks for the reply. I can see I can customize the uncheck.jpg file for each checkbox, but can I also customize the checked image for each checkbox?

ThNKS

glenngv

04-07-2005, 02:15 AM

Of course, you can use any images you want.

vorl

04-07-2005, 02:22 AM

Sorry I did not explain my self clearly.

Looking at the code below I can customize the uncheck.gif image for this checkbox. But there is no area where I can specify the specific checked image for this checkbox.

<img src="uncheck.gif" onclick="checkUncheck(this, 'chk')" /><input type="checkbox" id="chk" name="chk" style="display:none" value="1" />Item 1

Hope this helps in explaining my problem!!

glenngv

04-07-2005, 03:11 AM

function checkUncheck(oImg, sChkId){
var oChk = document.getElementById(sChkId);
oChk.checked = !oChk.checked;
oImg.src = (oChk.checked) ? "check.gif" : "unchecked.gif";
}

If the default state of the checkbox is checked, then you need to initially set the image source in the <img> tag to your check image.

TheRoper

04-07-2005, 03:15 AM

<html>
<head>
<title>My Page</title>

<script language="javascript" type="text/javascript"></script>
</head>

<body>

<img src="unchecked.gif" onclick="checkUncheck(this, 'chk')" /><input type="checkbox" id="chk" name="chk" style="display:none" value="1" />Item 1
<img src="unchecked.gif" onclick="checkUncheck(this, 'chk2')" /><input type="checkbox" id="chk2" name="chk2" style="display:none" value="1" />Item 2

</body>
</html>

the javascript part is changing the source (oImg.src) when you click on the image, so you only need to specify the "checked.gif" in the code itself, not in the image tag... note that there was a typo in glenngv's first post... he referenced "unchecked.gif" but the source of the image was defined as "uncheck.gif"... this was fixed in the above code, and has been tested...

edit: damn, you beat me to it... :)

hemebond

04-07-2005, 03:33 AM

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>56239</title>
<meta name="description" content="Image checkboxes">
</head>
<body>
<form>
<fieldset>
<input id="box" name="box" type="checkbox" value="true">
<label for="box">Checkbox</label>
<input type="submit">
</fieldset>
</form>

<script type="text/javascript">
function ImageCheckbox(inputElement, imageSrcOn, imageSrcOff)
{
var input = inputElement;
var image = createImageElement();

function createImageElement()
{
var img = document.createElement('img');

if(input.checked)
{
img.setAttribute('src', imageSrcOn);
}
else
{
img.setAttribute('src', imageSrcOff);
}

img.addEventListener('click', toggle, true);

input.parentNode.insertBefore(img, input);
input.addEventListener('click', toggle, true);
input.style.display = 'none';

return img;
}

function toggle(e)
{
if(e.currentTarget.nodeName.toLowerCase() == 'img')
{
input.checked = !input.checked;
}

image.src = (input.checked ? imageSrcOn : imageSrcOff);
}
}

var checkbox = new ImageCheckbox(document.getElementById('box'), '/images/checkbox_on', '/images/checkbox_off');
</script>
</body>
</html>

vorl

04-07-2005, 03:34 PM

thanks for the replies.

This script changes all the checkboxes in the form so there is a image for when the checkbox is checked and another image for when its unchecked.

However this is not what I want. Here is an example of what I require:

Checkbox 1 :- tick1.jpg(for checked) - tick2.jpg(for unchecked)

Checkbox 2 :- tick3.jpg(for checked) - tick4.jpg(for unchecked)

As you can see I want different checked and unchecked images for different checkboxes.

Hope this clears this up. ;) THANKS

hemebond

04-07-2005, 10:08 PM

Did you even look at my code?

vorl

04-08-2005, 01:37 AM

hi hemebond

sorry i didnt check your code previously. Anyway i have now and it works perfectly in Firefox. Is it possible if you can get it working in IE?

Thanks

stopsense

01-05-2006, 07:45 PM

Hi, I love this code but have a small caveat .. Is there any way to make the check function automatically UNCHECK other button(s) that are checked, so only one checkbox is checked at a time ?

Some loop or what ?

Best stopsense DK

hemebond

01-05-2006, 10:42 PM

Is there any way to make the check function automatically UNCHECK other button(s) that are checked, so only one checkbox is checked at a time ?That's what radio buttons are for.