Visa/dölja kod med checkbox

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?

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

Åå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!

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

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

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>

Funkar utmärkt, tackar! :bire

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.

den funkar prima cross-browser

Strålande, tack.

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

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