WN - Radio grupper och show/hide divs Javascript hjalp

WN (https://www.wn.se/forum/index.php)

- Klientsidans teknologier, design och grafik (https://www.wn.se/forum/forumdisplay.php?f=12)

- - Radio grupper och show/hide divs Javascript hjalp (https://www.wn.se/forum/showthread.php?t=1037854)

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)

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.

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>

Citat:

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å?

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.

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.

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.

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 :D