How do I change the style of a checkbox?

[liquidone]

I have a form with some checkboxes on it. There is a script running that adds a red border to the checkbox when it doesnt pass validation. However the script does not properly take the red border away when the user clicks on one of the boxes, it only removes 1 checkboxes border and not the rest. Instead of trying to modify their code, which is extremely complex and difficult to read, I want to run a onClick event on the checkboxes that just resets the style properties to normal for the 3 checkboxes, but I cant seem to figure out the syntax. What I have so far is:

document.leadinfo.none.style.border="0";

leadinfo is the name of the form the checkboxes are in.

Im not even sure what the default values are, but thats what i want to change the values back to. Hopefully you can help me out.
Thanks,
Mike

[mwinter]

document.leadinfo.none.style.border="0";

leadinfo is the name of the form the checkboxes are in.

I suggest that you alter how that object reference is constructed to:

document.forms.leadinfo.elements.none

It was a mistake for browser vendors to implement the short cuts you use above.

As for the border property, to remove a border, set it's style to 'none':

element.style.borderStyle = 'none';

where element is an object reference.

In case you aren't aware, if there is more than one checkbox with the name, 'none', the object reference I suggested above will return a collection (like an array) of elements, not a single element.

Mike

[liquidone]

I tried putting together the code you listed, and I couldnt get it to work. Im still very new to Javascript, and can only do small things. This is the code I used in the function:

function clearcheckbox(){
document.forms.leadinfo.elements.none.element.style.borderStyle = 'none';
document.forms.leadinfo.elements.attic.element.style.borderStyle = 'none';
document.forms.leadinfo.elements.crawl_space.element.style.borderStyle = 'none';
}

Those are the 3 checkboxes I need to clear of the big red border, none, attic, or crawl_space. I have an onClick="clearcheckbox()" on all of the checkboxes, which I tested by trying an alert, and that works. But the above function does not remove the border from the boxes. Hopefully its just a simple mistake on my part, please let me know, thanks,
Mike

[Twey]

element, in Mike's (the other Mike's ) example, was italicized, meaning that it isn't actually a part of the code, but an example name of an element. In this case, element would be document.forms.leadinfo.elements.none, for the first of your checkboxes, making the final statement:

document.forms.leadinfo.elements.none.style.borderStyle = 'none';

[liquidone]

Im afraid that change didnt work either. . .

I wonder if the script I use to do the validation could be interferring? Is that possible?

[Twey]

Not really, no. As Mike mentioned above: do you have multiple elements with the same name?

[liquidone]

No, i dont. I have 3 checkboxes all with different names.

1 is named none, 1 is name attic, and 1 is named crawl_space

Its for employees of a custom installation company, os they can fill out lead sheets from offsite. The validation checks to make sure they have selected at least 1 of them and is not, puts out an error and places a red border around all 3 checkboxes.

[Twey]

In that case...
PLEASE: Include the URL to your problematic webpage that you want help with.

[liquidone]

I cant put up the url to my page, because its password protected, but the sample page from the validation API has the same problem, so I will give you the link to try that.
The site is at http://www.qforms.org

The direct link to the zip file is http://www.qforms.org/qforms/downloa...PI%5F139%2Ezip

You can open up the example folder right away and open atleastone.htm to see an example of what i mean.

BTW, I really appreciate your help with this!

Mike-

[Twey]

There are no checkboxes in those examples...