/    Sign up×
Community /Pin to ProfileBookmark

Checklist bullets…JavaScript?

Copy linkTweet thisAlerts:
May 26.2008

Hello,

I would like to change the image used in selected check boxes on a form I am editing.

When the check box is selected the HTML looks like this>>

<td id=”CheckBox6″ class=”propValue”>
<b>
<font size=”2″/>
</b>
<ul>
<font size=”2″>
[B]<li type=”disc”>[/B]

When the check box is NOT selected the HTML looks like this>>

<td id=”CheckBox5″ class=”propValue”>
<b>
</b>
<ul>
<font size=”2″>
[B]<li type=”circle”>[/B]

I do not have the ability to add CSS classes or change this code in any way, I can however add CSS and javascript as needed.

I need to make the selected check boxes use a different image while allowing the unselected check boxes to display the “circle” property.

I have been unable to do this with CSS because the class is the same for both values so I was thinking that a bit of Java Script might be the key.

Any suggestions?

Thanks!

to post a comment
JavaScript

3 Comments(s) ↴

Copy linkTweet thisAlerts:
@FangMay 27.2008 — &lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
&lt;title&gt;changeType&lt;/title&gt;
&lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8"&gt;

&lt;script type="text/javascript"&gt;
window.onload=function() {
var aInputs=document.form1.getElementsByTagName('input');
for(var i=0; i&lt;aInputs.length; i++) {
aInputs[i].onclick=function(){changeType(this);};
}
};

function changeType(obj) {
obj.parentNode.parentNode.type=(obj.checked)? 'disc' : 'circle';
}
&lt;/script&gt;

&lt;/head&gt;
&lt;body&gt;
&lt;form action="#" name="form1"&gt;
&lt;ul&gt;
&lt;li type="circle"&gt;&lt;label&gt;foo: &lt;input type="checkbox"&gt;&lt;/label&gt;&lt;/li&gt;
&lt;li type="circle"&gt;&lt;label&gt;bar: &lt;input type="checkbox"&gt;&lt;/label&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;/form&gt;
&lt;/body&gt;
&lt;/html&gt;
Copy linkTweet thisAlerts:
@JumWilmsauthorMay 27.2008 — You lost me. I don't see how the above code would do what I need.

I need it to display all instances of a disc type, as an image.

The location of the gif I'd like to use is (/images/bullets/redx.gif).
Copy linkTweet thisAlerts:
@FangMay 28.2008 — 
When the check box is selected the HTML looks like this>>

<td id="CheckBox6" class="propValue">

<b>

<font size="2"/>

</b>

<ul>

<font size="2">

[B]<li type="disc">[/B]

When the check box is NOT selected the HTML looks like this>>

<td id="CheckBox5" class="propValue">

<b>

</b>

<ul>

<font size="2">

[B]<li type="circle">[/B][/QUOTE]From circle to disc

Please rephrase your question with valid html example.
×

Success!

Help @JumWilms spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 6.16,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @nearjob,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,
)...