/    Sign up×
Community /Pin to ProfileBookmark

Show/Hide using single Radio button?

hi,

I have a problem…is it possible for show/hide (Toggling) using only one radio button.?

When it is checked .we need to show the div..when it is not checked we need to hide the div?

is it possible?

<html>
<title>Test</title>

<head>
<script type=”text/javascript”>
function toggle(divToShow) {
if (document.getElementById) {
if (divToShow == “with”) {
document.getElementById(‘withdiv’).style.display = “inline”;
} else {
document.getElementById(‘withdiv’).style.display = “none”;
}
}
}

</script>
</head>

<body >

<input type=”radio” name=”sam” value=”1″ id=”with”
onclick=”toggle(‘with’)” /> With
<div id=”withdiv” style=”display:none;”>
<table width=”100%” border=”0″ cellspacing=”0″ cellpadding=”0″>
<tr>
<td width=”20%”><select name=””>
<option>– Select –</option>
</select>
</tr>
<tr>
</td>
<td><textarea name=”” cols=”” rows=””></textarea>
</td>
</tr>
</table>
</div>
</body>
</html>

to post a comment
JavaScript

5 Comments(s)

Copy linkTweet thisAlerts:
@vijirubaApr 23.2007 — Have checkbox instead of radio button

[CODE]
<html>
<title>Test</title>

<head>
<script type="text/javascript">
function toggle(divToShow) {
if (document.getElementById) {
if ([COLOR="Indigo"][B]divToShow.checked == true[/B][/COLOR]) {
document.getElementById('withdiv').style.display = "inline";
} else {
document.getElementById('withdiv').style.display = "none";
}
}
}

</script>
</head>

<body >

<input type="[COLOR="Indigo"][B]checkbox[/B][/COLOR]" name="sam" value="1" id="with"
onclick="toggle([COLOR="Indigo"][B]this[/B][/COLOR])" /> With
<div id="withdiv" style="display:none;">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="20%"><select name="">
<option>-- Select --</option>
</select>
</tr>
<tr>
</td>
<td><textarea name="" cols="" rows=""></textarea>
</td>
</tr>
</table>
</div>
</body>
</html>
[/CODE]


If you want to use radio button. Have two radio button and try.
Copy linkTweet thisAlerts:
@irishwebladyMay 16.2007 — I have 2 checkboxs. When EITHER one is checked I need the div to show. I currently have it working, however the div disappears when I uncheck one of the checkboxes.
Copy linkTweet thisAlerts:
@AngelamerkelNov 02.2007 — Friends,


function showRefer(obj)

{

var txtObj=obj;

if(txtObj.style.display=="none")

txtObj.style.display="block";

else

txtObj.style.display="none";

}

It is working fine in IE 6.but it is getting out of the pre-defined frame in Mozilla...

please suggest any changes to the above script or give me a substitute script for the same..

www(dot)transcriptionstar(dot)com(/)FeedBack_form(dot)html
Copy linkTweet thisAlerts:
@JMRKERNov 02.2007 — Can you use the information on post #12

at: http://www.webdeveloper.com/forum/showthread.php?t=164821

?

It's not modifying anything within a <table>, but it does provide some <div> examples with the radio buttons.
Copy linkTweet thisAlerts:
@Mr_JNov 02.2007 — [B]gmmsk7 [/B]

Try


[CODE]<script type="text/javascript">

count=0
function toggle(divToShow) {

if(divToShow == "with"){
if(count==0){
document.getElementById('withdiv').style.display = "inline";
count=1
}
else{
document.getElementById('with').checked=false
document.getElementById('withdiv').style.display = "none";
count=0
}
}

}

</script>[/CODE]
×

Success!

Help @gmmsk7 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.17,
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,
)...