Solved

fancy checkboxes or other toggle-switches

Posted on 2003-10-22
6
332 Views
Last Modified: 2006-11-17
Hi,

is it possible to use javascript (or any other web-development language to make a web-page that contains a toggle switch that changes color upon being pressed.

for example,  press once on a square and the square goes from white to black.  press again and it goes from black to white.  etc. etc.

basically, it behaves like a checkbox, but maybe is easier to see visually.

Thanks for any help!
0
Comment
Question by:pdanese
  • 3
  • 2
6 Comments
 
LVL 7

Accepted Solution

by:
Xxavier earned 38 total points
ID: 9604599
Try this

<script>
col="cRed"
function swap(){
 if (col=="cRed")
     {col="cBlue"
     return "#0000FF"}
 else
    {
     col="cRed"
     return "#FF0000"}
}
</script>
<table bgColor="red" width="30" onclick='this.bgColor = swap()'>
<tr><td>&nbsp;&nbsp;</td></tr>
</table>

0
 
LVL 3

Expert Comment

by:alexgreen
ID: 9605071
pdanese

are you wanting it to be available for submitting a form (don't think it's possible) or just as an aesthetic thing (Which X's code wil provide without any problem)

0
 
LVL 18

Assisted Solution

by:Plucka
Plucka earned 37 total points
ID: 9605377
You can do it easily. I'm not going to write it for you, but i've seen it before.

1. Create your tick box as an image.
2. Have an onclick event that toggles the image between the two states. This will also need to set the value of a hidden form variable.
3. Do normal form processing as the hidden form variables will contian you results.

Hope this helps.

0
How to improve team productivity

Quip adds documents, spreadsheets, and tasklists to your Slack experience
- Elevate ideas to Quip docs
- Share Quip docs in Slack
- Get notified of changes to your docs
- Available on iOS/Android/Desktop/Web
- Online/Offline

 
LVL 7

Expert Comment

by:Xxavier
ID: 9610421
Oh dear I was coding late last night and the code I gave you looks terrible, this is better


<table bgColor="#FF0000" width="30" onclick="(/ff0000/.test(bgColor))?bgColor='blue':bgColor='red'">
  <tr>
    <td>&nbsp;&nbsp;</td>
  </tr>
</table>


Alex surely you can add formName.submit() to the onclick

Xx
0
 
LVL 3

Expert Comment

by:alexgreen
ID: 9610639
yep, not thinking straight! soz
0
 
LVL 7

Expert Comment

by:Xxavier
ID: 9611527
looking at the code I submitted late last night neither was I. :-)
0

Featured Post

Enabling OSINT in Activity Based Intelligence

Activity based intelligence (ABI) requires access to all available sources of data. Recorded Future allows analysts to observe structured data on the open, deep, and dark web.

Join & Write a Comment

I've been trying to accomplish this for a while and it just struck me yesterday how to accomplish this task. I have done searches all over the internet looking for ways to email pages from my applications and finally I have done it!!! Every single s…
JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

707 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

16 Experts available now in Live!

Get 1:1 Help Now