---
title: "Dölj/visa div med radio-buttons"
type: "forum-thread"
url: "https://www.webforum.nu/amne/javascript/179385-dölj-visa-div-med-radio-buttons"
topic: "JavaScript"
topic_url: "https://www.webforum.nu/amne/javascript"
author: "Fireh"
published: "2009-07-13T13:31:14.000Z"
updated: "2009-07-21T10:50:48.000Z"
replies: 15
views: 769
page: 1
pages: 1
language: "sv-SE"
site: "webForum — webforum.nu"
rights: "Upphovsrätten till varje inlägg tillhör dess författare."
attribution: "Citera som: webForum, https://www.webforum.nu/amne/javascript/179385-dölj-visa-div-med-radio-buttons"
---

# Dölj/visa div med radio-buttons

## #1 — Fireh, 2009-07-13T13:31Z

Jag får inte riktigt till det med att dölja en div. Det första problemet är att \<div id="typ0" style="display: none;"\> inte gör den döljd från början. Problem två är att jag vill visa olika inmatningsfält beroende på om man valt företag eller privatperson, dessa vals görs med radio. Men bägge visas efter varandra hela tiden.

```
<tr>
  <td class='TPCell_A'>Typ</td>
  <td class='TPCell_B'>
    <input type="radio" name="Typ" tabindex="1" value="0" onclick='javascript:document.getElementById("typ0").style.display="block";document.getElementById("typ1").style.display="none";'> Företag<br/>
    <input type="radio" name="Typ" tabindex="2" value="1" onclick='javascript:document.getElementById("typ1").style.display="block";document.getElementById("typ0").style.display="none";'> Privatperson
  </td>
</tr>

<div id="typ0" style="display: none;">
<tr>
  <td class='TPCell_A'>Företag</td>
  <td class='TPCell_B'><input type="text" name="Foretag" size="50" tabindex="11"></td>
</tr>
<tr>
  <td class='TPCell_A'>Kontaktperson</td>
  <td class='TPCell_B'><input type="text" name="FName" size="22" tabindex="12"><input type="text" name="LName" size="22" tabindex="13"></td>
</tr>
</div>

<div id="typ1">
<tr>
  <td class='TPCell_A'>Namn</td>
  <td class='TPCell_B'><input type="text" name="FName" size="22" tabindex="21"><input type="text" name="LName" size="22" tabindex="22"></td>
</tr>
</div>
```

Någon som har huvudet på bättre plats än jag för tillfället?
Måste det finnas ett javascript med för att detta ska fungera?

Permalänk: https://www.webforum.nu/p/179385

## #2 — nitro2k01, 2009-07-13T13:39Z

Du ska inte ha **javascript:** i **onclick**. Bort me't.
**javascript:** är ett protokoll i likhet med **http:** **https:** och **mailto:** och ska därför bara användas i **href**\-attribut.

Permalänk: https://www.webforum.nu/p/2192935

## #3 — voigtann1, 2009-07-13T13:44Z

Sen bör du inte ha en div runt en tr (kan eller skall bara ha \<table\>, \<thead\>, \<tfoot\> eller \<tbody\> som parent).

Permalänk: https://www.webforum.nu/p/2192939

## #4 — Fireh, 2009-07-13T13:47Z

Ok, har tagit bort nu, men det fungerar ändå inte. Inget händer...

Jag har även testat med en annan funktion nu efter mitt inlägg, inte heller det ger någon effekt. Det får mig att tro att det är något fel nånstans som gör att jag inte kan dölja divar?

```
  <script type="text/javascript"> 
  function radioCheck(o) {
	if (o.value == "1") {
      document.getElementById("typ1").style.display = "block";
      document.getElementById("typ0").style.display = "none";
    } else {
      document.getElementById("typ0").style.display = "block";
      document.getElementById("typ1").style.display = "none";
    } 
  }
  </script>
```

```
<input type="radio" name="Typ" tabindex="1" value="0" onclick="radioCheck(0)"> Företag<br/>
<input type="radio" name="Typ" tabindex="2" value="1" onclick="radioCheck(1)"> Privatperson
```

Permalänk: https://www.webforum.nu/p/2192940

## #5 — Fireh, 2009-07-13T13:48Z

Hmmmm.... men om det nu är olika delar i en tabell som ska döljas/visas?

Permalänk: https://www.webforum.nu/p/2192942

## #6 — voigtann1, 2009-07-13T13:50Z

Du kan ju sätta ett ID på tr (tableRow) och visa eller dölj hela raden.

Permalänk: https://www.webforum.nu/p/2192943

## #7 — Fireh, 2009-07-13T13:53Z

Det fungerade ju bra!

Tackar!

Permalänk: https://www.webforum.nu/p/2192944

## #8 — nitro2k01, 2009-07-13T13:54Z

Fwlet nu är att du skriver **o.value** men skickar med en siffra. skriv antingen:

```
onclick="radioCheck(this);"
```

eller

```
if (o == "1"){ [kod] osv.
För övrigt, om du någon gång vill använda flera val kan du göra så här:[kod] <script type="text/javascript"> 
  function radioCheck(o) {
    for (var i=0; i<2; i++){
      if (i=o){
        document.getElementById("typ"+i).style.display = "block";
      }else{
        document.getElementById("typ"+i).style.display = "none";
      }
    }
  }
  </script>
```

2 byter du då ut mot rätt antal. Koden ovan funkar även med bara två element för övrigt.

Permalänk: https://www.webforum.nu/p/2192945

## #9 — voigtann1, 2009-07-13T13:59Z

Sen display: block är kanske inte rätt display typ på en tr-element ;)

Permalänk: https://www.webforum.nu/p/2192947

## #10 — Fireh, 2009-07-13T14:04Z

Även radioCheck-funktionen fungerar efter modifieringarna. Kan dock inte ha två accepterade lösningar, så skriver det istället.

Fick lägga ett unikt id per tr bara, gäller båda lösningarna. Annars var det bara den första som ändrades.

Permalänk: https://www.webforum.nu/p/2192948

## #11 — Fireh, 2009-07-20T23:48Z

Det visade sig nu när jag testade att det inte alls fungerar så bra i FireFox. Alla fält hamnar lite här och där i sidled när man klickar på ett av alternativen. Det ser bra ut tills man klickar, även om man klickar på den förvalda...

Det känns som att FF inte hanterar att dölja det korrekt. Innehållet försvinner, men det ser ut som den behåller nå extrakolumner...

Så här ska det se ut och det gör det innan man klickar på "Privatkund" eller "Företagskund" i FireFox.
![](http://www.fireh.se/ff1.jpg)

Så här blir det i FireFox när man klickat på Privatkund. I IE fungerar det bra.
![](http://www.fireh.se/ff2.jpg)

Tips?

Permalänk: https://www.webforum.nu/p/2193550

## #12 — voigtann1, 2009-07-21T04:43Z

> **[voigtann1 skrev:](https://www.webforum.nu/p/1473693)**
>
> Sen display: block är kanske inte rätt display typ på en tr-element ;)

Har du ändrat det?

Permalänk: https://www.webforum.nu/p/2193553

## #13 — Fireh, 2009-07-21T08:58Z

Jag har testat med display: inline, men det blev om möjligt sämre i Firefox. Fungerade dock bra i IE. Finns det något mer?

Permalänk: https://www.webforum.nu/p/2193567

## #14 — Peter S, 2009-07-21T09:10Z

table-row

<http://www.w3schools.com/css/pr_class_display.asp>

Permalänk: https://www.webforum.nu/p/2193568

## #15 — Fireh, 2009-07-21T09:41Z

Det fungerade ju bra i Firefox nu, men inte alls i IE (vilket det också står på sidan).
Så finns det något sätt att kombinera i bägge?  :)

Permalänk: https://www.webforum.nu/p/2193569

## #16 — Fireh, 2009-07-21T10:50Z

Jag har byggt om allt så att jag döljer hela tabeller och visar med display: block istället för att dölja/visa tr-element. Inte lika kul, men det fungerar.

Permalänk: https://www.webforum.nu/p/2193579

---

Tråden på webben: https://www.webforum.nu/amne/javascript/179385-dölj-visa-div-med-radio-buttons