Solved

fancy checkboxes or other toggle-switches

Posted on 2003-10-22
6
338 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
PRTG Network Monitor: Intuitive Network Monitoring

Network Monitoring is essential to ensure that computer systems and network devices are running. Use PRTG to monitor LANs, servers, websites, applications and devices, bandwidth, virtual environments, remote systems, IoT, and many more. PRTG is easy to set up & use.

 
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

PRTG Network Monitor: Intuitive Network Monitoring

Network Monitoring is essential to ensure that computer systems and network devices are running. Use PRTG to monitor LANs, servers, websites, applications and devices, bandwidth, virtual environments, remote systems, IoT, and many more. PRTG is easy to set up & use.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
how can i count words? 2 44
Angular service to share objects between controllers 1 15
Select case on click 3 16
alert(innerHTML); 8 18
This article shows how to create and access 2-dimensional arrays in JavaScript.  It includes a tutorial in case you are just trying to "get your head wrapped around" the concept and we'll also look at some useful tips for more advanced programmers. …
This article discusses how to create an extensible mechanism for linked drop downs.
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…

809 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