[JS] zmiana koloru tła

Kiluk · Post autor: **Kiluk** » pn lip 09, 2007 8:08 am

Witam.

Mam prosbe.

mam kilka radiobutton-ów. chciałbym, aby "aktywny" radiobutton miał zmienione tło na czerwone,
Optymalnie, aby tło objeło tez opis, znajdujacy sie obok radiobuttona.

Gorąco proszę o pomoc.

Kiluk · Post autor: **Kiluk** » wt lip 10, 2007 8:29 am

Znalazłem coś takiego, ale nie potrafię przerobic tego na 18 radiobuttonów.
Może ktos się zlituje.

Kod: Zaznacz cały

<html>
<head>

<style>

.s {background-color: silver; }
.t {background-color: silver; }
</style>


</head>
<body>

<form name=f1>
<span id=i0 class=s0>R0 <input id=j0 class=t0 type=radio name=r1 value="0" onclick="doIt(this.form,0)"></span><BR>
<span id=i1 class=s1>R1 <input id=j1 class=t1 type=radio name=r1 value="1" onclick="doIt(this.form,1)"></span><BR>
</form>
<script>
function doIt(_f,_i)
{
if(!document.getElementById)return; /* this example only for DOM browsers */
document.getElementById("i"+_i).className="s";
document.getElementById("j"+_i).className="t";
_i=(_i+1)%2; /* if 1 make 0 : if 0 make 1 */
document.getElementById("i"+_i).className="s"+_i;
document.getElementById("j"+_i).className="t"+_i;
}
</script>
</body>
</html>

Działanie jest dokładnie takie o jakie mi chodzi, tylko nie umiem tego sklonować na 18 radiobuttonów (tyle mi potrzeba). nie do końca rozumiem składnie skryptu, wiec o przeróbce nie ma mowy

Kiluk

Kiluk · Post autor: **Kiluk** » czw lip 12, 2007 1:27 pm

A byc moze wie ktoś jak zrobic (napisac jakis kod)
aby po zaznaczeniu radiobuttona wykonywał się "style css"
To tez byłoby jakies rozwiązanie
Kiluk

fan_pascala · Post autor: **fan_pascala** » czw lip 12, 2007 7:36 pm

Witam,
Można by to zrobić tak :

Kod: Zaznacz cały

<style>
.zwykly{background-color : white;}
.zaznaczony{background-color : red;}
</style>

<script>
function zaznacz(t)
{
  var pole=t.id;
  var ilosc = 3;

  for (var i=1; i<=ilosc;i++)
  {
    if (pole == i)
      document.getElementById('pole'+i).className='zaznaczony';
    else
      document.getElementById('pole'+i).className='zwykly';
  }
}
</script>

<body>
<fieldset>
<legend>Grupa opcji</legend>
<div id ="pole1">
<input id="1" type="radio" name="grupa1" value="opcja1" onclick="zaznacz(this);">opcja1</input>
</div>
<div id="pole2">
<input id="2" type="radio" name="grupa1" value="opcja2" onclick="zaznacz(this);">opcja2</input>
</div>
<div id="pole3">
<input id="3" type="radio" name="grupa1" value="opcja3" onclick="zaznacz(this);">opcja3</input>
</div>
<br>
</fieldset>
</body>
</html>

Przy dodawaniu kolejnych opcji należy oczywiście zmieniać wartość zmiennej ilość(z tego co piszesz to powinno być ilosc = 18) w funkcji zaznacz(t)

Kiluk · Post autor: **Kiluk** » pt lip 13, 2007 12:40 pm

Działa. stokrotne dzieki.

mam tylko 2 pytanka:

1. jak zrobic, aby któryś z radiobuttonów był zaznaczony i pokolorowany
jak dam chcecked, to jest zaznaczony, ale koloru nie ma
2. mam chceckbox, który robi to pole disabled = true ale jak to zrobic, aby kolor tez zniknął a nie tylko zaznaczenie radiobuttona

kiluk

fan_pascala · Post autor: **fan_pascala** » pt lip 13, 2007 1:54 pm

Witam,
1. Trzeba nieco przekształcić funkcję zaznacz()

Kod: Zaznacz cały

function zaznacz()
{
  var ilosc = 3;

  for (var i=1; i<=ilosc;i++)
  {
    if (document.getElementById(i).checked)
      document.getElementById('pole'+i).className='zaznaczony';
    else
      document.getElementById('pole'+i).className='zwykly';
  }
}

aby również pokolorowało na początku jedną z zaznaczonych opcji musi być dołączona do zdarzenia onload w znaczniku body.

Kod: Zaznacz cały

<body onload="zaznacz();">

2. Trzeba dorzucić tą funkcję (zaznacz()) na koniec kodu JS obsługującego checkbox'a.

Kiluk · Post autor: **Kiluk** » pt lip 13, 2007 4:10 pm

wielkie dzięki działa jak należy.
Nareszczie mój problem rozwiązany

Kiluk

[JS] zmiana koloru tła

[JS] zmiana koloru tła

re

re

Re: [JS] zmiana koloru tła

re

Re: [JS] zmiana koloru tła

re