Ukrycie pola radio w obrazku

Galakar · Post autor: **Galakar** » 18 lip 2011, 10:16:10

Skorzystałem z już napisanego skryptu do ukrywania pola radio w obrazku. Prawie wszystko działa dobrze. Mój problem wygląda następująco: gdy klikam na obrazek zaznacza mi się radio (tak jak powinno być). Tylko że pole formularza składa się z kilku pól radio o różnych nazwach. Niestety skrypt traktuje je jako jeden.

Kod ankiety:

Kod: Zaznacz cały

<input type = "radio" name = "vote" value = "Test 1"/><img class = "pic1" src = "/pics/1.jpg"/>
      <input type = "radio" name = "vote" value = "Test 2"/><img class = "pic1" src = "/pics/2.jpg"/>
          <input type = "radio" name = "vote1" value = "Test 3"/><img class = "pic2" src = "/pics/3.jpg"/>
      <input type = "radio" name = "vote1" value = "Test 4"/><img class = "pic2" src = "/pics/4.jpg"/>

Jak klikam wpierw Test 1, to zaznacza prawidłowo Test 1. Ale jak później kliknę Test 3, to odznacza mi Test 1 i zaznacza tylko Test 3. Skrypt wygląda następująco:

Kod: Zaznacz cały

<script type='text/javascript'>
$("input:radio").hide();
$(".pic1, .pic2").css({opacity: "0.5"});

$("img").click(function(){
    element = this.previousSibling;
    element.checked = true;
 
    $("input:radio").hide();
    $(".pic1, .pic2").animate({
        opacity: "0.5", // 
    }, 500 );   // szybkosc animacji w ms
    
    $(this).animate({
        opacity: "1.0",
    }, 500 );   // szybkosc animacji w ms
    
})
</script>

Będę wdzieczny za każdą sugestię, co robię nie tak.

Galakar · Post autor: **Galakar** » 27 lip 2011, 23:04:42

Może ktoś będzie to w przyszłości potrzebował, więc rozwiązanie problemu:

Kod: Zaznacz cały

<input type = "radio" name = "vote" value = "Test 1"/><img class = "pic1" src = "/pics/1.jpg"/>
<input type = "radio" name = "vote" value = "Test 2"/><img class = "pic1" src = "/pics/2.jpg"/>
<script type='text/javascript'>
$("input:radio").hide();
$(".pic1").css({opacity: "0.5"});

$("img.pic1").click(function(){
    element = this.previousSibling;
    element.checked = true;
 
    $("input:radio").hide();
    $(".pic1").animate({
        opacity: "0.5", // 
    }, 500 );   // szybkosc animacji w ms
    
    $(this).animate({
        opacity: "1.0",
    }, 500 );   // szybkosc animacji w ms
    
})
</script>

I to samo stosujemy dla kolejnych pól radio (zamieniamy '.pic1' na '.pic2', '.pic3' ... '.picn').

Hosting CBA.pl

Forum

Ukrycie pola radio w obrazku

Ukrycie pola radio w obrazku

Re: Ukrycie pola radio w obrazku

Oferta

Ważne

Firma

Newsletter