Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: Problem z radio button
Forum PHP.pl > Forum > Po stronie przeglądarki > JavaScript
kendry1
Witam,

W formularzu przekazującym dane do bazy mam przyciski radio button, w postaci:

  1. <input type="radio" id="question1a" name="label" value="1" /> <label for="question1a" id="label1a" onclick="document.getElementById('question1a').click();setTimeout('check(1)', 1)"><img src="img/vote3.jpg" onmouseover="this.className='hover'" onmouseout="this.className=''" alt="Nie" /></label>
  2. <input type="radio" id="question1b" name="label" value="2" /> <label for="question1b" id="label1b"
  3. onclick="document.getElementById('question1b').click();setTimeout('check(1)', 1)"><img src="img/vote2.jpg" onmouseover="this.className='hover'" onmouseout="this.className=''" alt="Mniej więcej" /></label>
  4. <input type="radio" id="question1c" name="label" value="3" /> <label for="question1c" id="label1c"
  5. onclick="document.getElementById('question1c').click();setTimeout('check(1)', 1)"><img src="img/vote1.jpg" onmouseover="this.className='hover'" onmouseout="this.className=''" alt="Tak" /></label>




Funkcja sprawdzająca wygląda następująco:
  1. function check(id) {
  2. try {
  3. if (document.getElementById('question' + id + 'a').checked)
  4. document.getElementById('label' + id + 'a').className='selected';
  5. else
  6. document.getElementById('label' + id + 'a').className='';
  7.  
  8. if (document.getElementById('question' + id + 'b').checked)
  9. document.getElementById('label' + id + 'b').className='selected';
  10. else
  11. document.getElementById('label' + id + 'b').className='';
  12.  
  13. if (document.getElementById('question' + id + 'c').checked)
  14. document.getElementById('label' + id + 'c').className='selected';
  15. else
  16. document.getElementById('label' + id + 'c').className='';
  17. } catch (e) {}
  18. }
  19.  
  20. check(1);
  21. check(2);
  22. check(3);


Problem z tym, że przyciski nie przekazują wartości zaznaczonej, ale gdy zmienię atrybut name w radiobuttonach na każdy inny, np:
  1. <input type="radio" id="question1a" name="label" value="1" /> <label for="question1a" id="label1a" onclick="document.getElementById('question1a').click();setTimeout('check(1)', 1)"><img src="img/vote3.jpg" onmouseover="this.className='hover'" onmouseout="this.className=''" alt="Nie" /></label>
  2. <input type="radio" id="question1b" name="label2" value="2" /> <label for="question1b" id="label1b"
  3. onclick="document.getElementById('question1b').click();setTimeout('check(1)', 1)"><img src="img/vote2.jpg"
  4. onmouseover="this.className='hover'" onmouseout="this.className=''" alt="Mniej więcej" /></label>
  5. <input type="radio" id="question1c" name="label3" value="3" /> <label for="question1c" id="label1c"
  6. onclick="document.getElementById('question1c').click();setTimeout('check(1)', 1)"><img src="img/vote1.jpg"
  7. onmouseover="this.className='hover'" onmouseout="this.className=''" alt="Tak" /></label>




to dane są przekazywane ale w powyższym przykładzie można zaznaczyć trzy buttony jednocześnie.

Czy ktoś potrafi mnie naprowadzić gdzie mam błąd?
b4rt3kk
Funkcja ma na celu dodanie klasy lub jej usunięcie? W zależności, który radio jest zaznaczony? Ja bym tu zaimplementował jQuery, znacznie by to ułatwiło sprawę. Zresztą po co puszczasz to w setTimeout? Nie można zrobić bez tego? Przy użyciu jQuery wyglądałoby to tak:

  1. $('input[type="radio"]').click(function() {
  2. if ($(this).is(':checked') $(this).closest('div').children('label').addClass('checked'); else $(this).closest('div').children('label').removeClass('checked');
  3. });


Musiałbyś tylko opakować każde radio i label w jeden nadrzędny div:

  1. <div>
  2. <input type="radio" id="question1c" name="label" value="3" /> <label for="question1c" id="label1c"
  3. onclick="document.getElementById('question1c').click();setTimeout('check(1)', 1)"><img src="img/vote1.jpg" onmouseover="this.className='hover'" onmouseout="this.className=''" alt="Tak" /></label>
  4. </div>








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.