Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

> Formularz, IE nie łapie zaznaczania radio w <label>
Beneglih
post
Post #1





Grupa: Zarejestrowani
Postów: 15
Pomógł: 0
Dołączył: 4.06.2011

Ostrzeżenie: (0%)
-----


Jak w temacie

mam formularz w którym mam różne obrazki
chcę, aby kliknięcie bezpośrednio na obrazek zaznaczało mi radio

w firefoxie i chrome działa takie rozwiązanie
<label><input type="radio"/><img src="obrazek" /></label>

niestety IE ma swoje humory i kliknięcie na obrazek nie powoduje żadnej reakcji
trzeba ręcznie klikać w radio

jak to obejść aby w IE kliknięcie w obrazek zaznaczało radio formularza?
Go to the top of the page
+Quote Post
 
Start new topic
Odpowiedzi
Galakar
post
Post #2





Grupa: Zarejestrowani
Postów: 11
Pomógł: 0
Dołączył: 29.05.2011
Skąd: Warszawa

Ostrzeżenie: (0%)
-----


Mam nadzieję, że nikt nie będzie miał nic przeciwko odświeżeniu tego tematu. Skorzystałem ze skryptu luckyps, ale mam ten sam problem co na początku Beneglih. Niestety jQuery jest dla mnie czarną magią, więc nie wiem co poszło nie tak.

Tak wygląda kod formularza:
  1. <input type = "radio" name = "vote" value = "Test 1"/><img class = "pic1" src = "/pics/1.jpg"/>
  2. <input type = "radio" name = "vote" value = "Test 2"/><img class = "pic1" src = "/pics/2.jpg"/>
  3. <input type = "radio" name = "vote1" value = "Test 3"/><img class = "pic2" src = "/pics/3.jpg"/>
  4. <input type = "radio" name = "vote1" value = "Test 4"/><img class = "pic2" src = "/pics/4.jpg"/>


A oto skrypt luckyps (dodałem drugą wartość, tak jak sugerował Beneglih, ale z jakiegoś powodu nie działa jak powinno):
  1. <script type='text/javascript'>
  2. //Skrypt autorstwa luckyps: <a href="http://forum.php.pl/index.php?s=&showtopic=179131&view=findpost&p=877218" target="_blank">http://forum.php.pl/index.php?s=&showt...st&p=877218</a>
  3. $("input:radio").hide();
  4. $(".pic1, .pic2").css({opacity: "0.5"});
  5.  
  6. $("img").click(function(){
  7. element = this.previousSibling;
  8. element.checked = true;
  9.  
  10. $("input:radio").hide();
  11. $(".pic1, .pic2").animate({
  12. opacity: "0.5", //
  13. }, 500 ); // szybkosc animacji w ms
  14.  
  15. $(this).animate({
  16. opacity: "1.0",
  17. }, 500 ); // szybkosc animacji w ms
  18.  
  19. })


Zrobiłem to w takiej kolejności:
  1. <tr>
  2. <td><input type = "radio" name = "vote" value = "Test 1"><img class = "pic1" src = "/pics/1.jpg"/></input>
  3. <input type = "radio" name = "vote" value = "Test 2"><img class = "pic1" src = "/pics/2.jpg"/></input></td>
  4. <script type='text/javascript'>
  5. //Skrypt autorstwa luckyps: <a href="http://forum.php.pl/index.php?s=&showtopic=179131&view=findpost&p=877218" target="_blank">http://forum.php.pl/index.php?s=&showt...st&p=877218</a>
  6. $("input:radio").hide();
  7. $(".pic1").css({opacity: "0.5"});
  8.  
  9. $("img").click(function(){
  10. element = this.previousSibling;
  11. element.checked = true;
  12.  
  13. $("input:radio").hide();
  14. $(".pic1").animate({
  15. opacity: "0.5", //
  16. }, 500 ); // szybkosc animacji w ms
  17.  
  18. $(this).animate({
  19. opacity: "1.0",
  20. }, 500 ); // szybkosc animacji w ms
  21.  
  22. })
  23. <td><input type = "radio" name = "vote1" value = "Test 3"><img class = "pic2" src = "/pics/3.jpg"/></input>
  24. <input type = "radio" name = "vote1" value = "Test 4"><img class = "pic2" src = "/pics/4.jpg"/></input></td>
  25. <script type='text/javascript'>
  26. //Skrypt autorstwa luckyps: <a href="http://forum.php.pl/index.php?s=&showtopic=179131&view=findpost&p=877218" target="_blank">http://forum.php.pl/index.php?s=&showt...st&p=877218</a>
  27. $("input:radio").hide();
  28. $(".pic2").css({opacity: "0.5"});
  29.  
  30. $("img").click(function(){
  31. element = this.previousSibling;
  32. element.checked = true;
  33.  
  34. $("input:radio").hide();
  35. $(".pic2").animate({
  36. opacity: "0.5", //
  37. }, 500 ); // szybkosc animacji w ms
  38.  
  39. $(this).animate({
  40. opacity: "1.0",
  41. }, 500 ); // szybkosc animacji w ms
  42.  
  43. })
  44. </tr>

Wszystko działa tak długo, jak klika po kolei. Czyli najpierw Test1/Test2 a później Test3/Test4. Problem występuje wtedy kiedy najpierw zaznaczam Test3/Test4, a następnie Test1/Test2. Wtedy odznaczeniu ulega Test3/Test4. Da się to jakoś usprawnić, aby kolejność nie była ważna?

Mógłbym prosić o jakąś poradę? Niestety nadal nie jestem w stanie rozwiązać tego problemu (IMG:style_emoticons/default/sad.gif)
Go to the top of the page
+Quote Post

Posty w temacie
- Beneglih   Formularz, IE nie łapie zaznaczania radio w <label>   28.06.2011, 11:19:56
- - luckyps   Moze takie rozwiazanie Cie zadowoli (użyłem JQuer...   28.06.2011, 11:42:03
- - Korab   Albo bez konieczności ładowania zewnętrznych bibli...   28.06.2011, 12:03:00
- - Beneglih   podsunęliście mi tym jquery pewien pomysł pytanie ...   28.06.2011, 13:17:57
- - luckyps   Wszystko sie da Mam nadzieje, ze o to Ci chodzilo...   28.06.2011, 13:39:35
- - Beneglih   jest prawie super, tylko że po zaznaczeniu element...   29.06.2011, 07:12:02
- - luckyps   Jestem jeszcze troche spiacy - ciekawe czy dobrze ...   29.06.2011, 07:31:10
- - toaspzoo   <input type=radio style="background:URL(...   29.06.2011, 07:59:13
- - Beneglih   @luckyps DZIĘKI WIELKIE wszystko działa tak jak c...   29.06.2011, 08:12:40
- - luckyps   ad. mniejszey problem: do input odpowiedzialnego ...   29.06.2011, 08:57:08
- - Beneglih   co do ad. mniejszy problem nie wiem czemu, ale to...   29.06.2011, 09:45:07
- - luckyps   ad.1 musze pomyslec... ad.2 chodzi, zebys wywalil...   29.06.2011, 09:53:37
- - Beneglih   reset już sobie rozwiązałem w ten sposób: ...   29.06.2011, 10:25:36
- - luckyps   i masz racje, w taki sposob bedziesz mial dostep d...   29.06.2011, 11:01:28
- - Sephirus   Mały komentarz z mojej strony - zabawa zabawą, kom...   29.06.2011, 18:10:11
- - Galakar   Mam nadzieję, że nikt nie będzie miał nic przeciwk...   26.07.2011, 18:23:57
- - luckyps   zamien [HTML] pobierz, plaintext $("img...   27.07.2011, 13:04:21
- - Galakar   Wielkie dzięki. To rozwiązało problem.   27.07.2011, 19:59:02


Reply to this topicStart new topic
2 Użytkowników czyta ten temat (2 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 



RSS Aktualny czas: 14.10.2025 - 20:41