---
title: "Visa/dölja kod med checkbox"
type: "forum-thread"
url: "https://www.webforum.nu/amne/javascript/135674-visa-dölja-kod-med-checkbox"
topic: "JavaScript"
topic_url: "https://www.webforum.nu/amne/javascript"
author: "web00132"
published: "2005-10-13T13:19:44.000Z"
updated: "2007-09-14T10:59:48.000Z"
replies: 11
views: 883
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/135674-visa-dölja-kod-med-checkbox"
---

# Visa/dölja kod med checkbox

## #1 — web00132, 2005-10-13T13:19Z

Jag har en loop i ASP som loopar ut en massa produkter med varsin checkbox som man kan kryssa i. När man gör det vill jag att det ska ploppa fram en liten textruta (input type="text") precis under produkten som man ska kunna fylla i en liten kommentar i. Detta borde man kunna lösa enkelt med en OnClick-funktion, jag är dock så kass på JavaScript så nån får gärna visa hur man bäst gör detta   :r 

Men sen är det en annan grej också, vissa checkboxar är nämligen redan ikryssade när man kommer in på sidan och under dom produkterna vill jag så klart också att det ska dyka upp en liten textbox. Hur gör man det, kan man göra det i body-taggen på nåt sätt kanske? OnLoad eller så?

Edit: För att underlätta det hela, föreställ er alltså en lista med produkter typ som den här: <http://www.dustin.se/dacsaportal/system/pages/products/r.aspx?s=G=424>
Tänk er att varje produkt har en checkbox längst till vänster i varje rad. När man klickar i denna, eller om den är ikryssad när man kommer in på sidan, ska en textbox ploppa fram precis under raden med produkten i. Är ni me?

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

## #2 — Peter S, 2005-10-13T19:33Z

Enkelt är om namnen på checkboxarna med tillhörande inputfält har någon koppling. Se bifogat exempel.

Bilagor:

- [web00132.txt](https://www.webforum.nu/a/8109.txt)

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

## #3 — web00132, 2005-10-14T12:03Z

Ååh, vad snyggt! Precis så vill jag ha, stort tack!   :bire 
Nu återstår bara att försöka få in det i min applikation, återkommer förhoppningsvis snart och accepterar ditt svar som slutgiltigt. Tack!

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

## #4 — web00132, 2005-10-14T12:33Z

Ok, en grej som jag inte grejar riktigt är att alla mina checkboxar som loopas ut har samma namn och så bör det nog vara också. Däremot har alla checkboxar olika 'value' i form av ett 'produktID' som hämtas från databas. Min textbox skulle ju kunna ha samma 'produktID' som checkboxen men då återstår frågan, hur ändrar jag i ditt JavaScript så det kollar vilket 'value' checkboxen har istället för vilket 'name'?

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

## #5 — Peter S, 2005-10-14T12:42Z

Ser värdet på checkboxarna ut enligt "produktID*X*", där *X* är ett tal? Då kanske det är möjligt att döpa textfälten enligt exempelvis "t_produktID*X*", för enkelhetens skull.

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

## #6 — Peter S, 2005-10-14T12:48Z

Så här alltså:

```
<style type="text/css">
table{
  border: 1px solid;
}

.it{
  display: none;
}
</style>

<script type="text/javascript">

function sh(ie){
  var elms = document.forms["f"].elements;

  elms["t_" + ie].style.display = elms["t_" + ie].style.display == "block" ? "none" : "block";
}

window.onload = function(){
  var elms = document.forms["f"].elements,
      len  = elms.length;

  for (var i = 0; i < len; ++i){
    if (elms[i].type == "checkbox"
	  && /^produktID\d+$/.test(elms[i].value)
	  && elms[i].checked){
      elms["t_produktID" + /\d+/.exec(elms[i].value)].style.display = "block";
    }
  }
}

</script>

<form name="f">
<table width="100%">
  <tr>
    <td rowspan="3"><input type="checkbox" name="cb" value="produktID1" onclick="sh(this.value)"></td>
  </tr>
  <tr>
    <td>CORSAIR 1GB DDR PC3200 400MHZ 2-3-3-6 LED</td>
  </tr>
  <tr>
    <td><input type="text" name="t_produktID1" class="it"></td>
  </tr>
  <tr>
    <td rowspan="3"><input type="checkbox" name="cb" value="produktID2" checked="checked" onclick="sh(this.value)"></td>
  </tr>
  <tr>
    <td>CORSAIR 1GB DDR PC3200 400MHZ CL2.5 (2X512MB)</td>
  </tr>
  <tr>
    <td><input type="text" name="t_produktID2" class="it"></td>
  </tr>
  <tr>
    <td rowspan="3"><input type="checkbox" name="cb" value="produktID3" onclick="sh(this.value)"></td>
  </tr>
  <tr>
    <td>CORSAIR 1GB DDR PC3200 400MHZ CL3 (2X512MB)</td>
  </tr>
  <tr>
    <td><input type="text" name="t_produktID3" class="it"></td>
  </tr>
</table>
</form>
```

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

## #7 — web00132, 2005-10-14T13:15Z

Funkar utmärkt, tackar!  :bire

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

## #8 — Niklasson, 2007-08-21T20:30Z

Precis vad jag sökte efter!

Någon som vet hur koden fungerar i olika webbläsare? Jag kan bara testa i IE7 just nu.

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

## #9 — colione, 2007-08-21T20:34Z

den funkar prima cross-browser

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

## #10 — Niklasson, 2007-08-23T06:31Z

Strålande, tack.

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

## #11 — leniz, 2007-09-14T08:48Z

Precis vad jag letade efter  (y) 

Men om man vill utveckla det lite så att den andra textrutan döljs om man ändrar sig efter att först ha klickar för ett alternativ, hur gör man då?

Alltså när den ena rutan visas vill jag samtidigt dölja de andra.

Mvh Lena

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

## #12 — leniz, 2007-09-14T10:59Z

Hej igen!
Det blev något helt annat till slut som fungerade för det jag ville uppnå.
/Lena

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

---

Tråden på webben: https://www.webforum.nu/amne/javascript/135674-visa-dölja-kod-med-checkbox