Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [CSS][JavaScript] Zmiana stylu diva jeśli zaznaczony jest guzik radio
Forum PHP.pl > Forum > Przedszkole
szymek001
Witam, korzystam z tego skryptu: http://jsfiddle.net/FnY7x/
Pozwala on na zaznaczenie pola input type='radio' po kliknięciu na div

  1. <div class="big">
  2. This is a div 1
  3. <input name="chb" type="radio" />
  4. </div>
  5.  
  6. <br/>
  7.  
  8. <div class="big">
  9. This is a div 2
  10. <input name="chb" type="radio" />
  11. </div>
  12.  
  13. <script type="text/javascript">
  14. $('.big').click(function() {
  15. $('input[name="chb"]', this).prop("checked",true);
  16. $('.big').removeClass('hli');
  17. $(this).addClass('hli');
  18. });


CSS:
  1. .big {
  2. width:100px;
  3. height:100px;
  4. background-color:red;
  5. cursor:pointer;
  6. }
  7.  
  8. .hli {
  9. border:2px solid blue;
  10. }
  11. /*.chb{display:none;}*/





Jednak oprócz tego pobieram z bazy zapisane ID i zaznaczam je skryptem:
  1. //zaznaczenie tego co jest aktualnie w bazie (np. id1)
  2. document.getElementById("id1").checked=true



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)
webdice
Nie wiem czy dobrze zrozumiałem. Dodaj na końcu:

[JAVASCRIPT] pobierz, plaintext
  1. $( 'input[type="radio"]:checked' )
  2. .parent()
  3. .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/
webdice
[JAVASCRIPT] pobierz, plaintext
  1. $( 'input[type="radio"]:checked' )
  2. .parents( 'div.big' )
  3. .addClass( 'hli' );
[JAVASCRIPT] pobierz, plaintext
szymek001
Jea, działa idealnie! Wielkie dzięki za odpowiedź o tej porze! biggrin.gif
Myślałem że poczekam do poniedziałku, a tu miła niespodzianka smile.gif
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ę.smile.gif
trueblue
  1. div.big:active,
  2. div.big:active>div{
  3. //tu styl
  4. }

(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
  1. <input name="chb" type="radio" />
  2. <div class="big">
  3. <div class="aa">This is a div 2</div>
  4. <div class="bb">This is a div 2</div>
  5. </div>


  1. input[name="chb"]:checked+div,
  2. input[name="chb"]:checked+div>div{
  3. //tu style
  4. }
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;}
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.