JScript Radio Buttons and checkboxes

**arye** · 12-21-2010, 11:29 PM

Hi All,

I have a question and I need your expert help.
I would like to do the followings:

I have 1 Check-box for Manual and Two radio Buttons for On and Off.
I need to establish : When someone click the check-box - it would automatically disable the other two radio buttons and when the check-box is unchecked the radio buttons return to enabled.

I have written the following:

= My Code Starts Here ======================================

<p><img border="0" src="buttonGL.png" style="left:10px;top:14px;width:100px;height:120px;text-align:left; position:absolute"></p>
<div id="sys_m_sp" class="data" style="left:20px;top:38px;width:100px;height:60px;text-align:left; position:absolute">
<input name="sysmodeSetpoint-cb" type="checkbox" value="1"onclick="sysmodeSetpoint.disables=true"/>Manual<br/>
</br>
<input name="sysModeSetpoint" type="radio" value="0" onclick="parent.toggleRadios(this)"/>Off<br/>

<input name="sysModeSetpoint" type="radio" value="3" onclick="parent.toggleRadios(this)"/>On
</div>

= My Code Ends Here ======================================

I'm not getting anything at all

- Please Help me I need it asap for a little project that I'm working on.

Thanks in advance,
Arye

**Nile** · 12-22-2010, 07:53 AM

When pasting a code, please remember to use [code] tags. That includes [ html ], [ code ], and [ php ].

You could play around with something as simple as:

Code:

<input type="checkbox" id="manual" name="manual" />

<input type="radio" id="on" name="automatic" />
<input type="radio" id="off" name="automatic" />

<script type="text/javascript">
document.getElementById('manual').onchange = function(){
document.getElementById('on').disabled = document.getElementById('off').disabled = (this.checked);
}
</script>

**arye** · 12-22-2010, 06:51 PM

Thank you! but I can't use this code if I have 2 or three panels that are use to control a device - the radio buttons "jumps" from one to another.

can you please help.

Thanks in advanced
Arye

**Nile** · 12-22-2010, 06:59 PM

Please post a link to the page on your site that contains the problematic script so we can check it out.

Please include ALL your code so that we can take a look at it, we can't do much without it. When you do post your code remember to use [code] tags. That includes [ html ], [ code ], and [ php ].

**arye** · 12-22-2010, 09:39 PM

Hi,

thank you

here is my code:

=======================================================================================

<html dir="ltr">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Manual  Off</title>
</head>

<body>
<p><img border="0" src="buttonGL.png" style="left:10px;top:14px;width:100px;height:120px;text-align:left; position:absolute"></p>



<div id="Eng_On_man_div" class="data" style="left:20px;top:38px;width:100px;height:60px;text-align:left; position:absolute">
<input name="manual" id="Eng_On_manual"type="checkbox" />Manual<br/>
</br>
<input type="radio" id="Eng_On_on" name="automatic" value="0" onclick="parent.toggleRadios(this)" />On<br/>
<input type="radio" id="Eng_On_off" name="automatic" value="3" onclick="parent.toggleRadios(this)" />Off<br/>
<script type="text/javascript">
document.getElementById('Eng_On_manual').onchange = function(){
document.getElementById('Eng_On_on').disabled = document.getElementById('Eng_On_off').disabled = (this.checked);
}
</script>
</div>

<p><img border="0" src="buttonGL.png" style="left:135px;top:14px;width:100px;height:120px;text-align:left; position:absolute"></p>

<div id ="SM_ps1_man_div" class="data" style="left:145px;top:38px;width:100px;height:60px;text-align:left; position:absolute">
<input name="manual" id="SM_ps1_manual"type="checkbox"/>Manual<br/>
</br>
<input type="radio" id="SM_ps1_on" name="automatic" value="0" onclick="parent.toggleRadios(this)"/>On<br/>
<input type="radio" id="SM_ps1_off" name="automatic" value="3" onclick="parent.toggleRadios(this)"/>Off<br/>
<script type="text/javascript">
document.getElementById('SM_ps1_manual').onchange = function(){
document.getElementById('SM_ps1_on').disabled = document.getElementById('SM_ps1_off').disabled = (this.checked);
}
</script>
</div>

</body>

</html>

==========================================================================

Thanks again.
Arye

**Nile** · 12-22-2010, 09:48 PM

What do you mean it "jumps?"

**arye** · 12-22-2010, 10:45 PM

When I click on a radio button in the Eng_On_man_div I have a black checking at the one I have clicked on. But when I click on another one from the second div SM_ps1_man_div the radio button that had a checking next to it before doesn't have it any more and the new radio button that was clicked at the end has the checking next to it - meaning that I have only one checking black dot all the time - i would like to have several checking dot for indication in each set of radio buttons - is that possible?

Thanks for your help

Arye

**Nile** · 12-22-2010, 10:50 PM

This is because you're grouping all of your radio buttons, as an example:

Code:

<input type="radio" name="food" value="Orange" />
<input type="radio" name="food" value="Banana" />
<input type="radio" name="food" value="Plum" />
<input type="radio" name="food" value="Cheese" />

Because all of these check boxes have the same name, they will "jump" from one to the other.

**arye** · 12-23-2010, 07:55 AM

Thank you very much

You have been a great help!

**Nile** · 12-23-2010, 04:41 PM

No problem, I'm glad to help

Here on DD, we like to keep things organized. In an effort to do so, you have the option to set a thread to resolved when an issue is fixed. To make the status of the thread resolved:
1. Go to your first post
2. Edit your first post
3. Click "Go Advanced"
4. In the dropdown next to the title, select "RESOLVED"

Thread: JScript Radio Buttons and checkboxes

Thread Tools

Search Thread

JScript Radio Buttons and checkboxes

Bookmarks

Bookmarks

Posting Permissions