webForumDet fria alternativet

Radio grupper och show/hide divs

1 svar · 417 visningar · startad av Dykarn

DykarnMedlem sedan mars 2005149 inlägg
#1

Jag har en websida som har 8 olika radio grupper
varje radio grupp har 4 olika alternativ

Text, CSS, Tema, Inget

nar nagot av dom olila radioboxarna blir vald sa vill jag att den relevanta diven ska bli synlig och dom andra divarna bli osynliga, dock ej om man valjer "inget" da alla divarna ska forsvinna.

har googlat men ej hittat nagot sa all hjalp ar valkommen

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Sida</title>
</head>

<body>

<form action="post.php" method="post">
	
	<fieldset>
		<legend accesskey="1">Test 1</legend>
			<label><input type="radio" name="grp-1" id="grp-1" value="text"/>Text</label><br />
			<label><input type="radio" name="grp-1" id="grp-1" value="css"/>CSS</label><br />
			<label><input type="radio" name="grp-1" id="grp-1" value="theme"/>Theme</label><br />
			<label><input type="radio" name="grp-1" id="grp-1" value="none"/>None</label><br />
		<div id="text-1">Text</div>
		<div id="css-1" style="display:none">CSS</div>
		<div id="theme-1" style="display:none">CSS</div>
		<div id="none-1" style="display:none">&nbsp;</div>	
	</fieldset>

<br />
	
	<fieldset>
		<legend accesskey="2">Test 2</legend>
			<label><input type="radio" name="grp-2" id="grp-2" value="text"/>Text</label><br />
			<label><input type="radio" name="grp-2" id="grp-2" value="css"/>CSS</label><br />
			<label><input type="radio" name="grp-2" id="grp-2" value="theme"/>Theme</label><br />
			<label><input type="radio" name="grp-2" id="grp-2" value="none"/>None</label><br />
		<div id="text-2">Text</div>
		<div id="css-2" style="display:none">CSS</div>
		<div id="theme-2" style="display:none">CSS</div>
		<div id="none-2" style="display:none">&nbsp;</div>	
	</fieldset>

<br />
	
	<fieldset>
		<legend accesskey="3">Test 3</legend>
			<label><input type="radio" name="grp-3" id="grp-3" value="text"/>Text</label><br />
			<label><input type="radio" name="grp-3" id="grp-3" value="css"/>CSS</label><br />
			<label><input type="radio" name="grp-3" id="grp-3" value="theme"/>Theme</label><br />
			<label><input type="radio" name="grp-3" id="grp-3" value="none"/>None</label><br />
		<div id="text-3" style="display:none">Text</div>
		<div id="css-3" style="display:none">CSS</div>
		<div id="theme-3" style="display:none">CSS</div>
		<div id="none-3">&nbsp;</div>	
	</fieldset>

<br />
	
	<fieldset>
		<legend accesskey="4">Test 4</legend>
			<label><input type="radio" name="grp-4" id="grp-4" value="text"/>Text</label><br />
			<label><input type="radio" name="grp-4" id="grp-4" value="css"/>CSS</label><br />
			<label><input type="radio" name="grp-4" id="grp-4" value="theme"/>Theme</label><br />
			<label><input type="radio" name="grp-4" id="grp-4" value="none"/>None</label><br />
		<div id="text-4" style="display:none">Text</div>
		<div id="css-4" style="display:none">CSS</div>
		<div id="theme-4" style="display:none">CSS</div>
		<div id="none-4">&nbsp;</div>	
	</fieldset>

<br />
	
	<fieldset>
		<legend accesskey="5">Test 5</legend>
			<label><input type="radio" name="grp-5" id="grp-5" value="text"/>Text</label><br />
			<label><input type="radio" name="grp-5" id="grp-5" value="css"/>CSS</label><br />
			<label><input type="radio" name="grp-5" id="grp-5" value="theme"/>Theme</label><br />
			<label><input type="radio" name="grp-5" id="grp-5" value="none"/>None</label><br />
		<div id="text-5" style="display:none">Text</div>
		<div id="css-5" style="display:none">CSS</div>
		<div id="theme-5" style="display:none">CSS</div>
		<div id="none-5">&nbsp;</div>	
	</fieldset>

<br />
	
	<fieldset>
		<legend accesskey="6">Test 6</legend>
			<label><input type="radio" name="grp-6" id="grp-6" value="text"/>Text</label><br />
			<label><input type="radio" name="grp-6" id="grp-6" value="css"/>CSS</label><br />
			<label><input type="radio" name="grp-6" id="grp-6" value="theme"/>Theme</label><br />
			<label><input type="radio" name="grp-6" id="grp-6" value="none"/>None</label><br />
		<div id="text-6" style="display:none">Text</div>
		<div id="css-6" style="display:none">CSS</div>
		<div id="theme-6" style="display:none">CSS</div>
		<div id="none-6">&nbsp;</div>	
	</fieldset>

<br />
	
	<fieldset>
		<legend accesskey="3">Test 7</legend>
			<label><input type="radio" name="grp-7" id="grp-7" value="text"/>Text</label><br />
			<label><input type="radio" name="grp-7" id="grp-7" value="css"/>CSS</label><br />
			<label><input type="radio" name="grp-7" id="grp-7" value="theme"/>Theme</label><br />
			<label><input type="radio" name="grp-7" id="grp-7" value="none"/>None</label><br />
		<div id="text-7" style="display:none">Text</div>
		<div id="css-7" style="display:none">CSS</div>
		<div id="theme-7" style="display:none">CSS</div>
		<div id="none-7">&nbsp;</div>	
	</fieldset>

<br />
	
	<fieldset>
		<legend accesskey="8">Test 8</legend>
			<label><input type="radio" name="grp-8" id="grp-8" value="text"/>Text</label><br />
			<label><input type="radio" name="grp-8" id="grp-8" value="css"/>CSS</label><br />
			<label><input type="radio" name="grp-8" id="grp-8" value="theme"/>Theme</label><br />
			<label><input type="radio" name="grp-8" id="grp-8" value="none"/>None</label><br />
		<div id="text-8" style="display:none">Text</div>
		<div id="css-8" style="display:none">CSS</div>
		<div id="theme-8" style="display:none">CSS</div>
		<div id="none-8">&nbsp;</div>	
	</fieldset>

</form>
</body>
</html>

Som sagt all hjalp ar valkommen da jag ej ar en hojdare pa js lankar till tutorials etc ar ocksa valkommna :stud

(ursakta for stavfel)

SebastianEMedlem sedan nov. 2004100 inlägg
#2

Dykarn skrev:

Jag har en websida som har 8 olika radio grupper
varje radio grupp har 4 olika alternativ

Text, CSS, Tema, Inget

nar nagot av dom olila radioboxarna blir vald sa vill jag att den relevanta diven ska bli synlig och dom andra divarna bli osynliga, dock ej om man valjer "inget" da alla divarna ska forsvinna.

har googlat men ej hittat nagot sa all hjalp ar valkommen

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Sida</title>
</head>

<body>

<form action="post.php" method="post">
	
	<fieldset>
		<legend accesskey="1">Test 1</legend>
			<label><input type="radio" name="grp-1" id="grp-1" value="text"/>Text</label><br />
			<label><input type="radio" name="grp-1" id="grp-1" value="css"/>CSS</label><br />
			<label><input type="radio" name="grp-1" id="grp-1" value="theme"/>Theme</label><br />
			<label><input type="radio" name="grp-1" id="grp-1" value="none"/>None</label><br />
		<div id="text-1">Text</div>
		<div id="css-1" style="display:none">CSS</div>
		<div id="theme-1" style="display:none">CSS</div>
		<div id="none-1" style="display:none">&nbsp;</div>	
	</fieldset>

<br />
	
	<fieldset>
		<legend accesskey="2">Test 2</legend>
			<label><input type="radio" name="grp-2" id="grp-2" value="text"/>Text</label><br />
			<label><input type="radio" name="grp-2" id="grp-2" value="css"/>CSS</label><br />
			<label><input type="radio" name="grp-2" id="grp-2" value="theme"/>Theme</label><br />
			<label><input type="radio" name="grp-2" id="grp-2" value="none"/>None</label><br />
		<div id="text-2">Text</div>
		<div id="css-2" style="display:none">CSS</div>
		<div id="theme-2" style="display:none">CSS</div>
		<div id="none-2" style="display:none">&nbsp;</div>	
	</fieldset>

<br />
	
	<fieldset>
		<legend accesskey="3">Test 3</legend>
			<label><input type="radio" name="grp-3" id="grp-3" value="text"/>Text</label><br />
			<label><input type="radio" name="grp-3" id="grp-3" value="css"/>CSS</label><br />
			<label><input type="radio" name="grp-3" id="grp-3" value="theme"/>Theme</label><br />
			<label><input type="radio" name="grp-3" id="grp-3" value="none"/>None</label><br />
		<div id="text-3" style="display:none">Text</div>
		<div id="css-3" style="display:none">CSS</div>
		<div id="theme-3" style="display:none">CSS</div>
		<div id="none-3">&nbsp;</div>	
	</fieldset>

<br />
	
	<fieldset>
		<legend accesskey="4">Test 4</legend>
			<label><input type="radio" name="grp-4" id="grp-4" value="text"/>Text</label><br />
			<label><input type="radio" name="grp-4" id="grp-4" value="css"/>CSS</label><br />
			<label><input type="radio" name="grp-4" id="grp-4" value="theme"/>Theme</label><br />
			<label><input type="radio" name="grp-4" id="grp-4" value="none"/>None</label><br />
		<div id="text-4" style="display:none">Text</div>
		<div id="css-4" style="display:none">CSS</div>
		<div id="theme-4" style="display:none">CSS</div>
		<div id="none-4">&nbsp;</div>	
	</fieldset>

<br />
	
	<fieldset>
		<legend accesskey="5">Test 5</legend>
			<label><input type="radio" name="grp-5" id="grp-5" value="text"/>Text</label><br />
			<label><input type="radio" name="grp-5" id="grp-5" value="css"/>CSS</label><br />
			<label><input type="radio" name="grp-5" id="grp-5" value="theme"/>Theme</label><br />
			<label><input type="radio" name="grp-5" id="grp-5" value="none"/>None</label><br />
		<div id="text-5" style="display:none">Text</div>
		<div id="css-5" style="display:none">CSS</div>
		<div id="theme-5" style="display:none">CSS</div>
		<div id="none-5">&nbsp;</div>	
	</fieldset>

<br />
	
	<fieldset>
		<legend accesskey="6">Test 6</legend>
			<label><input type="radio" name="grp-6" id="grp-6" value="text"/>Text</label><br />
			<label><input type="radio" name="grp-6" id="grp-6" value="css"/>CSS</label><br />
			<label><input type="radio" name="grp-6" id="grp-6" value="theme"/>Theme</label><br />
			<label><input type="radio" name="grp-6" id="grp-6" value="none"/>None</label><br />
		<div id="text-6" style="display:none">Text</div>
		<div id="css-6" style="display:none">CSS</div>
		<div id="theme-6" style="display:none">CSS</div>
		<div id="none-6">&nbsp;</div>	
	</fieldset>

<br />
	
	<fieldset>
		<legend accesskey="3">Test 7</legend>
			<label><input type="radio" name="grp-7" id="grp-7" value="text"/>Text</label><br />
			<label><input type="radio" name="grp-7" id="grp-7" value="css"/>CSS</label><br />
			<label><input type="radio" name="grp-7" id="grp-7" value="theme"/>Theme</label><br />
			<label><input type="radio" name="grp-7" id="grp-7" value="none"/>None</label><br />
		<div id="text-7" style="display:none">Text</div>
		<div id="css-7" style="display:none">CSS</div>
		<div id="theme-7" style="display:none">CSS</div>
		<div id="none-7">&nbsp;</div>	
	</fieldset>

<br />
	
	<fieldset>
		<legend accesskey="8">Test 8</legend>
			<label><input type="radio" name="grp-8" id="grp-8" value="text"/>Text</label><br />
			<label><input type="radio" name="grp-8" id="grp-8" value="css"/>CSS</label><br />
			<label><input type="radio" name="grp-8" id="grp-8" value="theme"/>Theme</label><br />
			<label><input type="radio" name="grp-8" id="grp-8" value="none"/>None</label><br />
		<div id="text-8" style="display:none">Text</div>
		<div id="css-8" style="display:none">CSS</div>
		<div id="theme-8" style="display:none">CSS</div>
		<div id="none-8">&nbsp;</div>	
	</fieldset>

</form>
</body>
</html>

Som sagt all hjalp ar valkommen da jag ej ar en hojdare pa js lankar till tutorials etc ar ocksa valkommna :stud

(ursakta for stavfel)

Använder du något JavaScript bibliotek? Är det först när man klickar på "None" som de andra alternativen ska försvinna?

126 ms totalt · 3 externa anrop · v20260731065814-full.86db40fa
0 ms — hämta forumlista (cache)
0 ms — hämta statistik (cache)
123 ms — hämta tråd, inlägg och bilagor (db)