---
title: "Byta bakgrundsfärg på en textbox när man klickar i/ur en checkbox"
type: "forum-thread"
url: "https://www.webforum.nu/amne/javascript/138145-byta-bakgrundsfärg-på-en-textbox-när-man-klickar-i-ur-en-checkbox"
topic: "JavaScript"
topic_url: "https://www.webforum.nu/amne/javascript"
author: "jimpa"
published: "2005-11-23T19:37:02.000Z"
updated: "2005-11-25T19:17:58.000Z"
replies: 17
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/138145-byta-bakgrundsfärg-på-en-textbox-när-man-klickar-i-ur-en-checkbox"
---

# Byta bakgrundsfärg på en textbox när man klickar i/ur en checkbox

## #1 — jimpa, 2005-11-23T19:37Z

Hej,

Jag hittade detta ett script för att få grafiska checkboxar. Nu vill jag komplicera det lite och kunna byta bakgrundsfärg på en "tillhörande" textbox när man klickar i/ur en checkbox. Jag har försökt att beskriva hur jag menar lite bättre i koden nedan! OBS mitt formulär är dynamiskt så det kan bli fler än två boxar!!

> \<form name="myForm"\>
> \<input type="text" name="textID_1" value="" size="20"\> \<-- Denna ska byta färg när en checkbox med ID 1 är checked!
> \<input type="text" name="textID_2" value="" size="20"\> \<-- Denna ska byta färg när en checkbox med ID 2 är checked!
> 
> \<input type="hidden" name="mycheckbox" value="0"\>
> \<a href="#" onClick="gfxCheckboxToggle(document.myForm.mycheckbox,document\['checkbox1'\],'images/off.gif','images/on.gif'); return false;"\>\<img src="images/off.gif" width=30 height=30 border=0 alt="" name="checkbox1"\>\</a\>
> \<a href="#" onClick="gfxCheckboxToggle(document.myForm.mycheckbox,document\['checkbox2'\],'images/off.gif','images/on.gif'); return false;"\>\<img src="images/off.gif" width=30 height=30 border=0 alt="" name="checkbox2"\>\</a\>
> \</form\>
> \<script type="text/javascript"\>
> /\* Detta script finns att hämta på <http://www.jojoxx.net> och
>    får användas fritt så länge som dessa rader står kvar. \*/
> 
> function gfxCheckboxToggle(checkboxobj,imgobj,offSrc,onSrc){
> 	checkboxobj.value = (checkboxobj.value=='1') ? '0':'1';
> 	if(document.images){
> 		imgobj.src = (checkboxobj.value=='1') ? onSrc:offSrc;
> 	}
> }
> \</script\>

Någon som vet hur man kan lösa detta?

Mvh,
Jimmy

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

## #2 — Peter S, 2005-11-24T01:01Z

Kommer samtliga dina checkboxar att vara kopplade till samma hidden-fält &#8212; radio-knappssimulering med andra ord? Eller skall du ha ett hidden-fält för varje checkbox?

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

## #3 — jimpa, 2005-11-24T15:32Z

Hej,

Nej alla checkboxar har ett "hidden-fält" kopplat till sig.

Mvh,
Jimmy

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

## #4 — Peter S, 2005-11-24T15:37Z

Så här?

```
<form name="myForm">
<input type="text" name="textID_1" value="" size="20"> <-- Denna ska byta färg när en checkbox med ID 1 är checked!
<input type="text" name="textID_2" value="" size="20"> <-- Denna ska byta färg när en checkbox med ID 2 är checked!

<input type="hidden" name="mycheckbox1" value="0">
<input type="hidden" name="mycheckbox2" value="0">
<a href="#" onClick="gfxCheckboxToggle(document.myForm.mycheckbox1,document['checkbox1'],'off.gif','on.gif',1); return false;"><img src="off.gif" width=30 height=30 border=0 alt="" name="checkbox1"></a>
<a href="#" onClick="gfxCheckboxToggle(document.myForm.mycheckbox2,document['checkbox2'],'off.gif','on.gif',2); return false;"><img src="off.gif" width=30 height=30 border=0 alt="" name="checkbox2"></a>
</form>
<script type="text/javascript">
/* Detta script finns att hämta på [url]http://www.jojoxx.net[/url] och
får användas fritt så länge som dessa rader står kvar. */

function gfxCheckboxToggle(checkboxobj,imgobj,offSrc,onSrc,id){
  checkboxobj.value = (checkboxobj.value=='1') ? '0':'1';
  if(document.images){
    imgobj.src = (checkboxobj.value=='1') ? onSrc:offSrc;
  }

  var elm = document.myForm.elements["textID_" + id];
  elm.style.backgroundColor = elm.style.backgroundColor != "#eee" ? "#eee" : "#fff";
}
</script>
```

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

## #5 — jimpa, 2005-11-24T16:06Z

:) Helt suveränt, tackar!

Går det även att få till en "check all" och en "uncheck all" länk?
Vore ju så bra!

Mvh,
Jimmy

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

## #6 — Peter S, 2005-11-24T16:17Z

```
<form name="myForm">
<input type="text" name="textID_1" value="" size="20"> <-- Denna ska byta färg när en checkbox med ID 1 är checked!
<input type="text" name="textID_2" value="" size="20"> <-- Denna ska byta färg när en checkbox med ID 2 är checked!

<input type="hidden" name="mycheckbox1" value="0">
<input type="hidden" name="mycheckbox2" value="0">
<a href="#" onClick="gfxCheckboxToggle(document.myForm.mycheckbox1,document['checkbox1'],'off.gif','on.gif',1); return false;"><img src="off.gif" width=30 height=30 border=0 alt="" name="checkbox1"></a>
<a href="#" onClick="gfxCheckboxToggle(document.myForm.mycheckbox2,document['checkbox2'],'off.gif','on.gif',2); return false;"><img src="off.gif" width=30 height=30 border=0 alt="" name="checkbox2"></a>
<a href="#" onClick="ucc()">Check/Uncheck all</a>
</form>
<script type="text/javascript">
/* Detta script finns att hämta på [url]http://www.jojoxx.net[/url] och
får användas fritt så länge som dessa rader står kvar. */

function gfxCheckboxToggle(checkboxobj,imgobj,offSrc,onSrc,id){
  checkboxobj.value = (checkboxobj.value=='1') ? '0':'1';
  if(document.images){
    imgobj.src = (checkboxobj.value=='1') ? onSrc:offSrc;
  }

  var elm = document.myForm.elements["textID_" + id];
  elm.style.backgroundColor = elm.style.backgroundColor == "#eee" ? "#fff" : "#eee";
}

function ucc(){
  var elms = document.myForm.elements,
      tmp  = null;

  for (var i = 1; (elm = elms["mycheckbox" + i]); ++i){
    gfxCheckboxToggle(elm, document['checkbox' + i], 'off.gif', 'on.gif', i);
  }
}
</script>
```

  :)

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

## #7 — jimpa, 2005-11-24T17:28Z

Tackar!
Funkade nästan perfekt. Ett problem är att alla boxar som är checked blir unchecked och alla som är unchecked blir checked när klickar på länken. Hoppas du förstår hur jag menar?

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

## #8 — Peter S, 2005-11-24T17:44Z

Tänkte inte på det  ;) 

```
<form name="myForm">
<input type="text" name="textID_1" value="" size="20"> <-- Denna ska byta färg när en checkbox med ID 1 är checked!
<input type="text" name="textID_2" value="" size="20"> <-- Denna ska byta färg när en checkbox med ID 2 är checked!

<input type="hidden" name="mycheckbox1" value="0">
<input type="hidden" name="mycheckbox2" value="0">
<a href="#" onClick="gfxCheckboxToggle(document.myForm.mycheckbox1,document['checkbox1'],'off.gif','on.gif',1); return false;"><img src="off.gif" width=30 height=30 border=0 alt="" name="checkbox1"></a>
<a href="#" onClick="gfxCheckboxToggle(document.myForm.mycheckbox2,document['checkbox2'],'off.gif','on.gif',2); return false;"><img src="off.gif" width=30 height=30 border=0 alt="" name="checkbox2"></a>
<a href="#" onClick="checkAll(true)">Check all</a><a href="#" onClick="checkAll(false)">Uncheck all</a>
</form>
<script type="text/javascript">
/* Detta script finns att hämta på [url]http://www.jojoxx.net[/url] och
får användas fritt så länge som dessa rader står kvar. */

function gfxCheckboxToggle(checkboxobj,imgobj,offSrc,onSrc,id){
  checkboxobj.value = (checkboxobj.value=='1') ? '0':'1';
  if(document.images){
    imgobj.src = (checkboxobj.value=='1') ? onSrc:offSrc;
  }

  var elm = document.myForm.elements["textID_" + id];
  elm.style.backgroundColor = elm.style.backgroundColor != "#eeeeee" ? "#eeeeee" : "#ffffff";
}

function checkAll(b){
  var elms = document.myForm.elements;

  for (var i = 0; i < elms.length; ++i){
    if (/^mycheckbox\d+$/.test(elms[i].name)){
      elms[i].value = b * 1;
    } else if (/^textID_(\d+)$/.test(elms[i].name)){
      elms[i].style.backgroundColor = b ? "#eeeeee" : "#ffffff";
      document['checkbox' + RegExp.$1].src = b ? "on.gif" : "off.gif";
    }
  }
}
</script>
```

Nu fick du visst både en 'Check all'- och 'Uncheck all'-knapp.

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

## #9 — jimpa, 2005-11-24T18:24Z

Nu är jag superduper nöjd!! Tack så hemskt mycket för hjälpen    :bire

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

## #10 — jimpa, 2005-11-24T23:13Z

Hej,

Jag har fått ett problem! Eftersom formuläret med alla dessa checkboxar skall kunna editeras kommer en del av checkboxarna  vara checked och en del unchecked när sidan skrivs ut. Det verkar som att detta kan ställa till problem och felet jag får är,
När jag har olika värden i minna hidden fält, exempel:

*\<input type="hidden" name="mycheckbox1" value="**0**"\>
\<input type="hidden" name="mycheckbox2" value="**1**"\>*

Visas fel bild (värde och bakgrundsfärgen är rätt!) på den grafiska checkboxen på den som har värde 1.

Om jag går in och ändrar den här raden 
*imgobj.src = (checkboxobj.value=='1') ? onSrc:offSrc;*
och byter värdet till 0 blir problemet tvärtom (alltså fel bild visas på den grafiska checkboxen på den som har värde 0).

Någon som har en aning om hur jag kan lösa detta?

Mvh,
Jimmy

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

## #11 — Peter S, 2005-11-25T10:05Z

Hej igen!  :) 

Hantera detta problem när du skriver ut sidan med serverspråket. Om t.ex. "mycheckbox2" ovan skall ha värdet 1 när sidan laddats ändrar du dels tillhörande bildkälla till "on.gif", dels tillhörande textbox bakgrundsfärg:

```
<form name="myForm">
<input type="text" name="textID_1" value="" size="20"> <-- Denna ska byta färg när en checkbox med ID 1 är checked!
<input type="text" name="textID_2" value="" size="20" style="background-color:#eeeeee"> <-- Denna ska byta färg när en checkbox med ID 2 är checked!

<input type="hidden" name="mycheckbox1" value="0">
<input type="hidden" name="mycheckbox2" value="1">
<a href="#" onClick="gfxCheckboxToggle(document.myForm.mycheckbox1,document['checkbox1'],'off.gif','on.gif',1); return false;"><img src="off.gif" width=30 height=30 border=0 alt="" name="checkbox1"></a>
<a href="#" onClick="gfxCheckboxToggle(document.myForm.mycheckbox2,document['checkbox2'],'off.gif','on.gif',2); return false;"><img src="on.gif" width=30 height=30 border=0 alt="" name="checkbox2"></a>
<a href="#" onClick="checkAll(true)">Check all</a><a href="#" onClick="checkAll(false)">Uncheck all</a>
</form>
<script type="text/javascript">
/* Detta script finns att hämta på [url]http://www.jojoxx.net[/url] och
får användas fritt så länge som dessa rader står kvar. */

function gfxCheckboxToggle(checkboxobj,imgobj,offSrc,onSrc,id){
  checkboxobj.value = (checkboxobj.value=='1') ? '0':'1';
  if(document.images){
    imgobj.src = (checkboxobj.value=='1') ? onSrc:offSrc;
  }

  var elm = document.myForm.elements["textID_" + id];
  elm.style.backgroundColor = elm.style.backgroundColor != "#eeeeee" ? "#eeeeee" : "#ffffff";
}

function checkAll(b){
  var elms = document.myForm.elements;

  for (var i = 0; i < elms.length; ++i){
    if (/^mycheckbox\d+$/.test(elms[i].name)){
      elms[i].value = b * 1;
    } else if (/^textID_(\d+)$/.test(elms[i].name)){
      elms[i].style.backgroundColor = b ? "#eeeeee" : "#ffffff";
      document['checkbox' + RegExp.$1].src = b ? "on.gif" : "off.gif";
    }
  }
}
</script>
```

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

## #12 — jimpa, 2005-11-25T13:54Z

Hej,

Jag har redan gjort så som du säger men problemet blir:
När sidan skrivs ut stämmer allt och jag kan checka i och ur boxarna hur jag vill och allt funkar som det ska nästan!
Problemet är på dom boxarna som är checked. Därför att om jag vill vill checka ur en då ändras färgen och värdet (i hidden-fältet) men inte bilden? Klickar jag två gånger då ändras bilden, men då har jag fel bild i förhållande till färgen och värdet.
Detta gäller bara dom boxarna som är checked när jag skriver ut sidan. Dom boxarna som är unchecked funkar som dom ska!

Detta blev rörigt värre, men jag hoppas du förstår hur jag menar?

Mvh,
Jimmy

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

## #13 — Peter S, 2005-11-25T14:02Z

Har du en länk till sidan? Annars, kan du förklara utifrån den senaste koden jag postade hur man skall klicka för att uppleva problemet?

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

## #14 — jimpa, 2005-11-25T14:50Z

Tack, nu verkar det funka!!

Felet var att jag hade fått till det så att bildern skiftade även i den här kod-raden: *\<a href="#" onClick="gfxCheckboxToggle(document.myForm.mycheckbox2,document\['checkbox2'\],'off.gif','on.gif',2); return false;"\>*   :r 

Mvh,
Jimmy

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

## #15 — Peter S, 2005-11-25T14:51Z

Wunderbar!  :D

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

## #16 — jimpa, 2005-11-25T18:51Z

Nu tänkte jag krångla till det lite ytterligare :)

Jag skulle villja att texten är "bold" när en checkbox är "unchecked" jag provade att lägga till den nedersta raden i koden nedan, vilket förstås inte funkade....

  *var elm = document.GridForm.elements\["Box;" + id\];
  elm.style.backgroundColor = elm.style.backgroundColor != "#eeeeee" ? "#eeeeee" : "#ffffff";
  elm.style.font-weight = elm.style.font-weight != "" ? "" : "bold";*

Någon som vet?

Mvh,
Jimmy

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

## #17 — Peter S, 2005-11-25T19:00Z

```
font-weight -> fontWeight
```

  :)

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

## #18 — jimpa, 2005-11-25T19:17Z

Tack!!

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

---

Tråden på webben: https://www.webforum.nu/amne/javascript/138145-byta-bakgrundsfärg-på-en-textbox-när-man-klickar-i-ur-en-checkbox