Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: Formularz, IE nie łapie zaznaczania radio w <label>
Forum PHP.pl > Forum > Po stronie przeglądarki > HTML \ XHTML
Beneglih
28.06.2011, 11:19:56
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?
luckyps
28.06.2011, 11:42:03
Moze takie rozwiazanie Cie zadowoli (użyłem JQuery):

[HTML] pobierz, plaintext 
  1. <label><input type="radio"><img src="sciezka/do/obrazka" /></input></label>
  2.  
  3. <script  type='text/javascript'>
  4. $("img").click(function(){
  5.     element = this.previousSibling;
  6.     element.checked = true;
  7. })
  8. </script>
[HTML] pobierz, plaintext
Korab
28.06.2011, 12:03:00
Albo bez konieczności ładowania zewnętrznych bibliotek typu jQuery - w ten sposób:
[HTML] pobierz, plaintext 
  1. <html>
  2. <head>
  3. <script  type='text/javascript'>
  4. function zaznacz(co){
  5.     element = co.previousSibling;
  6.     element.checked = true;
  7. }
  8. </script>
  9. </head><body>
  10.  
  11. <form>
  12.  <label>
  13.    <input type="radio">
  14.       <img src="sciezka/do/obrazka" onClick="zaznacz(this);" />
  15.    </input>
  16.  </label>
  17. </form>
  18.  
  19. </body></html>
[HTML] pobierz, plaintext
Beneglih
28.06.2011, 13:17:57
podsunęliście mi tym jquery pewien pomysł
pytanie czy wykonalny?

Tj. czy dałoby się ukryć w ogóle przycisk radio, a zamiast niego zastosować jakiś hover na obrazku?

czyli użytkownik klika w obrazek, ten np. szarzeje i staje się w ten sposób zaznaczonym buttonem
kliknie na inny, to inny zsarzeje, a poprzedni odzyska kolor

domyślam się, że trzeba by kombinować z klasą :active?
luckyps
28.06.2011, 13:39:35
Wszystko sie da wink.gif
Mam nadzieje, ze o to Ci chodzilo....

[HTML] pobierz, plaintext 
  1. <label><input name="radiobutton" type="radio"><img class="image" src="adres/do/obrazka" /></input></label>
  2. <label><input name="radiobutton" type="radio"><img class="image" src="adres/do/obrazka" /></input></label>
  3.  
  4. <script type='text/javascript'>
  5.  
  6. $("input:radio").hide(); // na dzien dobry ukrywamy wszystkie radiobuttony
  7.  
  8. $("img").click(function(){
  9.     element = this.previousSibling;
  10.     element.checked = true;
  11.  
  12.     $("input:radio").hide();
  13.     $(".image").fadeIn("slow");
  14.  
  15.     $(this).fadeOut("slow", function() {
  16.         $(element).fadeIn("slow");
  17.     });
  18. })
  19. </script>
[HTML] pobierz, plaintext
Beneglih
29.06.2011, 07:12:02
jest prawie super, tylko że po zaznaczeniu element znika całkowicie,
dałoby się tak zrobić, żeby po prostu przyszarzał, przyciemnił obojętne, ale żeby nie zniknął?
luckyps
29.06.2011, 07:31:10
Jestem jeszcze troche spiacy - ciekawe czy dobrze zrozumialem wink.gif

[HTML] pobierz, plaintext 
  1. $("input:radio").hide();
  2. $(".image").css({opacity: "0.5"});
  3.  
  4. $("img").click(function(){
  5.     element = this.previousSibling;
  6.     element.checked = true;
  7.  
  8.     $("input:radio").hide();
  9.     $(".image").animate({
  10.         opacity: "0.5", // 
  11.     }, 500 );   // szybkosc animacji w ms
  12.  
  13.     $(this).animate({
  14.         opacity: "1.0",
  15.     }, 500 );   // szybkosc animacji w ms
  16.  
  17. })
[HTML] pobierz, plaintext


w takim rozwiazaniu radiobuttony bedzie zawsze ukryty, ale zaznaczenie go przez klkikniecie obrazka bedzie dzialac.
toaspzoo
29.06.2011, 07:59:13
<input type=radio style="background:URL('obrazek.jpg');">
Beneglih
29.06.2011, 08:12:40
@luckyps DZIĘKI WIELKIE thumbsupsmileyanim.gif
wszystko działa tak jak chciałem (przestawiłem sobie tylko wartości na odwrót bo chciałem żeby wszystko było w kolorze a po zaznaczeniu szarzało)

innym również dziękuję za bezinteresowną pomoc smile.gif




W sumie jeszcze pojawił się mały problem,
tj. wciśnięcie reset w formularzu resetuje zaznaczenia, ale zaznaczone elementy nie odzyskują koloru, po prostu reset formularza nie wpływa na efekty jquery

I WIĘKSZY PROBLEM tj.
w formularzu mam wiele różnych nazw inputów

czyli <input name="1" value="x" /><input name="2"/ value="x">

a ten skrypt powoduje, że nie ma różnicy w ogóle nazwa inputu
zawsze efekt działa tylko na 1 inpucie, czyli wiele różnych rzeczy można sobie klikać i zaznaczać, a efekt będzie widoczny tylko na 1 ostatnio klikniętym elemencie
jak "zostawić" efekt na już klikniętych radiach?
luckyps
29.06.2011, 08:57:08
ad. mniejszey problem:

do input odpowiedzialnego za reset formularza dodac zdarzenie onclick
[HTML] pobierz, plaintext 
  1. <form id="mojformularz">
  2. .
  3. .
  4. .
  5. <input type="reset" onclick="nazwaFunkcji();">
  6. </form>
[HTML] pobierz, plaintext 


[HTML] pobierz, plaintext 
  1. nazwaFunkcji() {
  2.     $(".image").css({opacity: "0.5"}); // wywolac funkcje, ktora znow tak jak na poczatku ustawi przezroczystosc elementow na odpowiednim poziomie
  3.     $("#mojformularz").reset();
  4. }
[HTML] pobierz, plaintext


ad. wiekszy problem:
znow bede strzelal czy o to chodzi tongue.gif

[HTML] pobierz, plaintext 
  1. // zakomentuj ta czesc kodu:
  2. /*$(".image").animate({
  3. //opacity: "0.5", 
  4. /}, 500 ); // szybkosc animacji w ms*/
[HTML] pobierz, plaintext

Beneglih
29.06.2011, 09:45:07
co do ad. mniejszy problem

nie wiem czemu, ale to w ogóle nie działa,
tj. pojawiają się butony radio i przestaje działać cały skrypt

co do ad. większy problem

to ten kawałek kodu który podałeś jest identyczny jak ten który podałeś wcześniej w całym skrypcie,
więc chcąc nie chcąc, żadnych zmian w działaniu nie odnotowuje wink.gif
luckyps
29.06.2011, 09:53:37
ad.1 musze pomyslec...
ad.2 chodzi, zebys wywalil ze skryptu ta czesc kodu ktora tam pokazalem wink.gif
Beneglih
29.06.2011, 10:25:36
reset już sobie rozwiązałem w ten sposób:

$("#reset").click(function(){
$(".image").css({opacity: "1.0"});
});

i dałem id inputa resetu na #reset



a jak wywalę ten fragment, o którym piszesz to wtedy radio działa jak checkbox
kliknięcie w KAŻDY input powoduje jego bezpowrotne poszarzenie

a jak mam kilka różnych elementów formularza

JEST OK
załatwiłem to daniem różnych klas dla wybranych obrazków
czyli np.
<input name="1"/><img class="1"/>
<input name="2"/><img class="2"/>

i w skrypcie pododawałem klasy w ciągu
$(".1 , .2")

luckyps
29.06.2011, 11:01:28
i masz racje, w taki sposob bedziesz mial dostep do tego do czego chcesz smile.gif
Sephirus
29.06.2011, 18:10:11
Mały komentarz z mojej strony - zabawa zabawą, kombinowanie kombinowaniem ale ja przede wszystkim zacząłbym od tego:

[HTML] pobierz, plaintext 
  1. <input type="radio" name="nazwa" value="1" id="radio1"><label for="radio1"><img src="obrazek1.jpg" alt="obrazek"/></label>
  2. <input type="radio" name="nazwa" value="1" id="radio2"><label for="radio2"><img src="obrazek2.jpg" alt="obrazek"/></label>
  3. <input type="radio" name="nazwa" value="1" id="radio3"><label for="radio3"><img src="obrazek3.jpg" alt="obrazek"/></label>
[HTML] pobierz, plaintext


I niezależnie od tego czy input typu radio będzie ukryty czy nie - to zawsze zadziała pod każdą przeglądarką... nawiasem mówiąc...

Pozdrawiam wink.gif
Galakar
26.07.2011, 18:23:57
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:
[HTML] pobierz, plaintext 
  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"/>
[HTML] pobierz, plaintext


A oto skrypt luckyps (dodałem drugą wartość, tak jak sugerował Beneglih, ale z jakiegoś powodu nie działa jak powinno):
[HTML] pobierz, plaintext 
  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. })
  20. </script>
[HTML] pobierz, plaintext


Zrobiłem to w takiej kolejności:
[HTML] pobierz, plaintext 
  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. </script>
  24.   <td><input type = "radio" name = "vote1" value = "Test 3"><img class = "pic2" src = "/pics/3.jpg"/></input>
  25. 	  <input type = "radio" name = "vote1" value = "Test 4"><img class = "pic2" src = "/pics/4.jpg"/></input></td>
  26. <script type='text/javascript'>
  27. //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>
  28. $("input:radio").hide();
  29. $(".pic2").css({opacity: "0.5"});
  30.  
  31. $("img").click(function(){
  32.     element = this.previousSibling;
  33.     element.checked = true;
  34.  
  35.     $("input:radio").hide();
  36.     $(".pic2").animate({
  37.         opacity: "0.5", // 
  38.     }, 500 );   // szybkosc animacji w ms
  39.  
  40. 	$(this).animate({
  41.         opacity: "1.0",
  42.     }, 500 );   // szybkosc animacji w ms
  43.  
  44. })
  45. </script>
  46.  </tr>
[HTML] pobierz, plaintext

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 sad.gif
luckyps
27.07.2011, 13:04:21
zamien
[HTML] pobierz, plaintext 
  1. $("img").click(function(){
[HTML] pobierz, plaintext

na
[HTML] pobierz, plaintext 
  1. $("img.pic1").click(function(){
[HTML] pobierz, plaintext


i w drugim skrypcie analogicznie na img.pic2

Jesli dalej to nie to co chcesz uzyskac - daj znac.
Galakar
27.07.2011, 19:59:02
Wielkie dzięki. To rozwiązało problem.
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.