Kom ihåg mig?
Home Menu

Menu

FAQ
Kalender
Forum FAQ

WN > Webbutveckling & webbhotell > Klientsidans teknologier, design och grafik

Radio grupper och show/hide divs Javascript hjalp

Visa första olästa Visa första olästa  
Ämnesverktyg Visningsalternativ
Oläst 2009-09-07, 18:10 #1
Dykarn Dykarn är inte uppkopplad
Flitig postare
  
Reg.datum: Feb 2005
Inlägg: 488
Dykarn Dykarn är inte uppkopplad
Flitig postare
 
Reg.datum: Feb 2005
Inlägg: 488
Standard Radio grupper och show/hide divs Javascript hjalp
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

<div id="grp1">
radio grp 1

text
css
tema
inget

<div="1css">Text</div>
<div="1text">css</div>
<div="1tema">tema</div>
</div>

<div id="grp2">
radio grp 2

text
css
tema
inget

<div="2css">Text</div>
<div="2text">css</div>
<div="2tema">tema</div>
</div>

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

(ursakta for stavfel)
Dykarn är inte uppkopplad   Svara med citatSvara med citat
Oläst 2009-09-07, 20:24 #2
allstars allstars är inte uppkopplad
Klarade millennium-buggen
  
Reg.datum: Apr 2006
Inlägg: 2 126
allstars allstars är inte uppkopplad
Klarade millennium-buggen
 
Reg.datum: Apr 2006
Inlägg: 2 126
Citat:
<div="2css">Text</div>
detta följer inte kodstandard. Det skall vara class eller id-attribut samt att värdet inte skall börja med en siffra.

Kan du klistra in kod som är mer relevant, dvs med riktiga radioknappar och bra döpta divvar?

Kod:
<!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" xml:lang="en" lang="en">
 <head>
  <title> new document </title>
  <meta http-equiv="content-type" content="text/html;charset=utf-8" />
  <meta name="generator" content="editplus" />
  <meta name="author" content="" />
  <meta name="keywords" content="" />
  <meta name="description" content="" />
  <script type="text/javascript">
  <!--
	window.onload = init;
	function init(){
		hide_all();

		document.getElementById("myoption-1").onclick = function(){
			hide_all()
			document.getElementById("more-choises-1").style.display = (this.checked) ? "" : "none"
		};
		document.getElementById("myoption-2").onclick = function(){
			hide_all()
			document.getElementById("more-choises-2").style.display = (this.checked) ? "" : "none"
		};
		document.getElementById("myoption-3").onclick = function(){
			hide_all();
		};
		document.getElementById("myoption-4").onclick = function(){
			hide_all();
		};
	}
	function hide_all(){
		document.getElementById("more-choises-1").style.display="none";
		document.getElementById("more-choises-2").style.display="none";
	}
  //-->
  </script>
 </head>

 <body>
  <form method="post" action="post.php">
	<fieldset>
		<div>
			<label><input type="radio" name="myoption" id="myoption-1" value="choice-1"/>Val 1</label><br />
			<label><input type="radio" name="myoption" id="myoption-2" value="choice-2"/>Val 2</label><br />
			<label><input type="radio" name="myoption" id="myoption-3" value="choice-3"/>Val 3</label><br />
			<label><input type="radio" name="myoption" id="myoption-4" value="choice-4"/>Val 4</label>
		</div>
		<div id="more-choises-1">
		flera val<br />
			<label><input type="radio" name="myoption-2" id="myoption-2-1" value="choice-1"/>Val 1</label>
			...			
		</div>
		<div id="more-choises-2">änna flera val<br />
			<label><input type="radio" name="myoption-3" id="myoption-2-1" value="choice-1"/>Val 1</label><br />
			
			<label><input type="radio" name="myoption-3" id="myoption-2-2" value="choice-1"/>Val 2</label>
			...			
		</div>
	</fieldset>
  </form>
 </body>
</html>
ett enkelt exempel som gömmer / visa divvar beroende vad man väljer.
Jag har inte tagit i hänsyn att nollställa radioknappar om man valt något i de osynliga divvarna, det kan man göra server-side om man vill.
allstars är inte uppkopplad   Svara med citatSvara med citat
Oläst 2009-09-07, 23:28 #3
Dykarn Dykarn är inte uppkopplad
Flitig postare
  
Reg.datum: Feb 2005
Inlägg: 488
Dykarn Dykarn är inte uppkopplad
Flitig postare
 
Reg.datum: Feb 2005
Inlägg: 488
Hej Allstars, tack for ditt svar, har bifogat kod som vissar hur jag vill att detta ska fungera, varje grp har 4 olika divar som jag vill visa beroende pa val av den relevanta radioboxen

Kod:
<!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>
Dykarn är inte uppkopplad   Svara med citatSvara med citat
Oläst 2009-09-08, 11:35 #4
allstars allstars är inte uppkopplad
Klarade millennium-buggen
  
Reg.datum: Apr 2006
Inlägg: 2 126
allstars allstars är inte uppkopplad
Klarade millennium-buggen
 
Reg.datum: Apr 2006
Inlägg: 2 126
Citat:
<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>
Jag förstår inte alls hur du vill att det skall fungera.
Skall du visa vad man valt? Det ser man ju redan.


edit: Det är alltså ett textstycke resp css-kod som du skall visa i dessa divvar. Det var inte alls tydligt

Behövs då formuläret? Skall man skicka något eller vill du vara visa text/kod beroende på vad man klickar på?
Senast redigerad av allstars den 2009-09-08 klockan 11:46 Anledning: förtydligande
allstars är inte uppkopplad   Svara med citatSvara med citat
Oläst 2009-09-08, 19:17 #5
Dykarn Dykarn är inte uppkopplad
Flitig postare
  
Reg.datum: Feb 2005
Inlägg: 488
Dykarn Dykarn är inte uppkopplad
Flitig postare
 
Reg.datum: Feb 2005
Inlägg: 488
Tack for ditt svar, forlat om jag ar lite otydlig..

Ska forsoka att forklara battre.
(har lagt till checked="checked")
Kod:
	<fieldset>
		<legend accesskey="1">Test 1</legend>
			<label><input type="radio" name="grp-1" id="grp-1" value="text" checked="checked"/>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>


Som default sa ar
Kod:
<input type="radio" name="grp-1" id="grp-1" value="text" checked="checked"/>
och
Kod:
<div id="text-1">Text</div>
visas
Men om anvandaren valjer
Kod:
<input type="radio" name="grp-1" id="grp-1" value="css"/>CSS
sa vill jag att
Kod:
<div id="text-1">Text</div>
blir gomd och att
Kod:
<div id="css-1" style="display:none">CSS</div>
visas

som sagt tacksam for all hjalp da javascript inte ar min starka sida... har ocksa borjat att titta mer pa jquery men hittar ingen bra tutorial for detta.
Dykarn är inte uppkopplad   Svara med citatSvara med citat
Oläst 2009-09-08, 21:54 #6
allstars allstars är inte uppkopplad
Klarade millennium-buggen
  
Reg.datum: Apr 2006
Inlägg: 2 126
allstars allstars är inte uppkopplad
Klarade millennium-buggen
 
Reg.datum: Apr 2006
Inlägg: 2 126
jquery är bra för då kan man skippa id-parametrarna och körra på class istället (samma class för alla divvar som har css-innehåll, så att säga) och så från inputen går man till föräldern och sedan syskonet med classen "css". Kolla under "Traversing" på jquerys hemsida.
allstars är inte uppkopplad   Svara med citatSvara med citat
Oläst 2009-09-09, 01:17 #7
PHREDATOR PHREDATOR är inte uppkopplad
Medlem
  
Reg.datum: Jul 2007
Inlägg: 156
PHREDATOR PHREDATOR är inte uppkopplad
Medlem
 
Reg.datum: Jul 2007
Inlägg: 156
Det du vill göra är att kolla när en radiobutton blir klickad.
När den blir det så vill du veta vilken grupp div du är i (grp1, grp2 osv) du vill också veta vilken radiobutton man klickat på för att kunna visa rätt div.

Kod:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Index</title>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> 

<script type="text/javascript">

	$(document).ready(function() {
	
		$('input[type="radio"]').click(function(){
		
			var clicked = $(this).val();
			var parentDiv = $(this).parent().attr('id');
			
			$('#'+parentDiv+ ' div').css({'display':'none'}).each(function(){
				var currDiv = $(this);
				
				if(currDiv.attr('class') === clicked){
					currDiv.css({'display':'block'});
				}
			});
		
		});
	
	});

</script>

<style type="text/css">

.css{
background:yellow;
}
.text{
background:blue;
}
.tema{
background:red;
}

</style>

</head>
<body>

	<div id="grp1">
		
		<input type="radio" name="group1" value="css" /> CSS <br />
		<input type="radio" name="group1" value="text" /> TEXT <br />
		<input type="radio" name="group1" value="tema" /> TEMA <br />
		<input type="radio" name="group1" value="inget" /> INGET <br />
		

		<div class="css">
		<h1>CSS</h1>
		Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque vitae lacinia velit. Maecenas rhoncus, justo rutrum posuere egestas, nibh erat facilisis quam, ut imperdiet mauris urna quis urna. Cras sem magna, dignissim nec tincidunt ac, tincidunt ac velit. Praesent interdum, nisl vitae dignissim consequat, magna tortor ullamcorper tortor, ac feugiat massa dolor eu quam. Nam sodales suscipit porta. Ut luctus, risus nec accumsan consectetur, urna lacus sollicitudin lectus, in tempus leo ligula at elit. Nulla id aliquam dolor. Etiam a ligula sem. Morbi in velit erat. Nullam condimentum dignissim mi pulvinar cursus. Nulla facilisi. </div>
		
		<div class="text">
		<h1>TEXT</h1>
		Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque vitae lacinia velit. Maecenas rhoncus, justo rutrum posuere egestas, nibh erat facilisis quam, ut imperdiet mauris urna quis urna. Cras sem magna, dignissim nec tincidunt ac, tincidunt ac velit. Praesent interdum, nisl vitae dignissim consequat, magna tortor ullamcorper tortor, ac feugiat massa dolor eu quam. Nam sodales suscipit porta. Ut luctus, risus nec accumsan consectetur, urna lacus sollicitudin lectus, in tempus leo ligula at elit. Nulla id aliquam dolor. Etiam a ligula sem. Morbi in velit erat. Nullam condimentum dignissim mi pulvinar cursus. Nulla facilisi. </div>
		
		<div class="tema">
		<h1>TEMA</h1>
		Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque vitae lacinia velit. Maecenas rhoncus, justo rutrum posuere egestas, nibh erat facilisis quam, ut imperdiet mauris urna quis urna. Cras sem magna, dignissim nec tincidunt ac, tincidunt ac velit. Praesent interdum, nisl vitae dignissim consequat, magna tortor ullamcorper tortor, ac feugiat massa dolor eu quam. Nam sodales suscipit porta. Ut luctus, risus nec accumsan consectetur, urna lacus sollicitudin lectus, in tempus leo ligula at elit. Nulla id aliquam dolor. Etiam a ligula sem. Morbi in velit erat. Nullam condimentum dignissim mi pulvinar cursus. Nulla facilisi. </div>
	
	</div>
		
</body>
</html>
Det viktiga här är att value på radiobuttons har samma värde som class på de divar du vill visa eller dölja, resten sköts automagiskt.
Du behöver inte göra något speciellt för att skapa flera grupper (i detta upplägget) allt du behöver göra är att kopiera grp1 diven och byta id till grp2 samt byta name på radiobuttons till group2.

Du kan kika på en screencast jag mumlade ihop här http://screenr.com/Be8

Lycka till.
PHREDATOR är inte uppkopplad   Svara med citatSvara med citat
Oläst 2009-09-10, 21:12 #8
Dykarn Dykarn är inte uppkopplad
Flitig postare
  
Reg.datum: Feb 2005
Inlägg: 488
Dykarn Dykarn är inte uppkopplad
Flitig postare
 
Reg.datum: Feb 2005
Inlägg: 488
Hej allstars och PHREDATOR,

Tack for hjalpen och det fungerar perfect enda andringen jag gjorda var att jag la till
Kod:
$('.text, .theme').hide();
for att dolja dom fran borjan men visa dom om man inte har JS...
Tack for hjalpen
Dykarn är inte uppkopplad   Svara med citatSvara med citat
Svara

« Föregående ämne | Nästa ämne »

Aktiva användare som för närvarande tittar på det här ämnet: 1 (0 medlemmar och 1 gäster)
 

Regler för att posta
Du får inte posta nya ämnen
Du får inte posta svar
Du får inte posta bifogade filer
Du får inte redigera dina inlägg
BB-kod är på
Smilies är på
[IMG]-kod är på
HTML-kod är av
Forumhopp


Alla tider är GMT +2. Klockan är nu 13:10.

Programvara från: vBulletin® Version 3.8.2
Copyright ©2000 - 2025, Jelsoft Enterprises Ltd.
Svensk översättning av: Anders Pettersson
 
WN Domännamn
Copyright © 2017