[CSS][JavaScript] Zmiana stylu diva jeśli zaznaczony jest guzik radio Opcje

[szymek001]

Witam, korzystam z tego skryptu: http://jsfiddle.net/FnY7x/
Pozwala on na zaznaczenie pola input type='radio' po kliknięciu na div

[HTML] pobierz, plaintext 
<div class="big">
This is a div 1
<input name="chb" type="radio" />
</div>
 
<br/>
 
<div class="big">
This is a div 2
<input name="chb" type="radio" />
</div>
 
<script type="text/javascript">
$('.big').click(function() {
    $('input[name="chb"]', this).prop("checked",true);
    $('.big').removeClass('hli');
    $(this).addClass('hli');
});
</script>
[HTML] pobierz, plaintext 

CSS:

[HTML] pobierz, plaintext 
.big {
    width:100px;
    height:100px;
    background-color:red;
    cursor:pointer;
}
 
.hli {
    border:2px solid blue;
}
/*.chb{display:none;}*/
[HTML] pobierz, plaintext 

Jednak oprócz tego pobieram z bazy zapisane ID i zaznaczam je skryptem:

[HTML] pobierz, plaintext 
<script>
//zaznaczenie tego co jest aktualnie w bazie (np. id1)
document.getElementById("id1").checked=true
</script>
[HTML] pobierz, plaintext 

Teraz pytanie: w jaki sposób zmienić klase div'a z .big na .hli jeśli zaznaczony jest jest radio? Skrypt na samej górze zmienia klase diva dopiero po kliknięciu.



Edit: dla jasności pokazuje o co mi chodzi: http://jsfiddle.net/FnY7x/2/
Chcę by drugi div miał tło żółte jeśli radio jest zaznaczone (aktualnie zmienia się na żółte dopiero po kliknięciu)

Ten post edytował szymek001 28.07.2012, 00:33:28

[webdice]

Nie wiem czy dobrze zrozumiałem. Dodaj na końcu:

[JAVASCRIPT] pobierz, plaintext 
$( 'input[type="radio"]:checked' )
    .parent()
        .addClass( 'hli' );
[JAVASCRIPT] pobierz, plaintext 

[szymek001]

tak, o to chodziło tylko jeszcze jedno ale..

co jeśli w formularzu mam taką budowę:

Kod

<div class="big"><div class="input"><input class='radio' type='radio' name='nazwa' id='id1' value='wartość1' />Wartość1</div></div>

?

Przez to zmienia się klasa diva wewnętrznego (class="input"), jest możliwość by zmienić główny div (class="big")?

http://jsfiddle.net/FnY7x/4/

Ten post edytował szymek001 28.07.2012, 01:15:45

[webdice]

[JAVASCRIPT] pobierz, plaintext 
$( 'input[type="radio"]:checked' )
    .parents( 'div.big' )
        .addClass( 'hli' );
[JAVASCRIPT] pobierz, plaintext 

[szymek001]

Jea, działa idealnie! Wielkie dzięki za odpowiedź o tej porze!
Myślałem że poczekam do poniedziałku, a tu miła niespodzianka

[symtronik]

Na poczatek chciałem sie przywitać.

A teraz do sedna męcze się już dłuższy czas z tym skryptem, może mi ktoś podpowiedzieć jak zrobić żeby po naciśnięciu zmieniły się style kilku div wewnątrz tzn
jak jest

<div class="big">
<div class="aa">This is a div 2</div>
<div class="bb">This is a div 2</div>
<input name="chb" type="radio" />
</div>

to żeby nie tylko big się zmienił, ale również aa i bb

Z góry dziekuję.

[trueblue]

[HTML] pobierz, plaintext 
div.big:active,
div.big:active>div{
//tu styl
}
[HTML] pobierz, plaintext 

(Po naciśnięciu, a nie po naciśnięciu i przeładowaniu strony.)

[symtronik]

Niestety nie do końca to tak działa jak chcę. Po kliknięciu zmienia się na chwilę styl, a mi chodzi żeby po kliknięciu w pole zmieniały się style kilków divów do czasu wyboru innego inputa.

[trueblue]

[HTML] pobierz, plaintext 
<input name="chb" type="radio" />
<div class="big">
<div class="aa">This is a div 2</div>
<div class="bb">This is a div 2</div>
</div>
[HTML] pobierz, plaintext 

[HTML] pobierz, plaintext 
input[name="chb"]:checked+div,
input[name="chb"]:checked+div>div{
//tu style
}
[HTML] pobierz, plaintext 

[symtronik]

Dzięki wielkie męczyłem się z tym wczoraj kilka godzin, a to było takie proste. lekko zmodyfikowałem i działa dla kazdego diva z osobna. Jak by komuś było potrzebne niżej kod:

input[name="chb"]:checked+div>div.aa{
background:blue;
}
input[name="chb"]:checked+div>div.bb {background:yellow;}