Sprawdzanie który przycisk radio został zaznaczony

Question

hej!

Mam problem z inputami radio. jak zprwdzić który z nich został zaznaczony (wszystkie mają ten sam name ale różne ID) W miare możliwości proszę o HTML/JS a nie PHP ale jeżeli się nie da PHP też może być :)

Answer 1

Nie słuchaj smokolisza! W podane przez niego sposób nie uzyskasz efektu przełącznika, lecz 3 oddzielne pojedyncze opcje do zaznaczenia/odznaczenia. Przykład na szybko:

<input type="radio" name="pole_radio" value="opcja1">opis opcji 1
<input type="radio" name="pole_radio" value="opcja2">opis opcji 2
<input type="radio" name="pole_radio" value="opcja3">opis opcji 3

Pamiętaj o wspólnym name dla wszystkich pól!

A teraz PHP (metoda POST)

if (isset($_POST("pole_radio")) {
   if($_POST("pole_radio")=="opcja1") {
      //instrukcje do wykonania, gdy wybrano opcję 1
   }
   if($_POST("pole_radio")=="opcja2") {
      //instrukcje do wykonania, gdy wybrano opcję 2
   }
   if($_POST("pole_radio")=="opcja3") {
      //instrukcje do wykonania, gdy wybrano opcję 3
   }
}

 

Comments

Wszystko fajnie, tylko dodałbym małą adnotację... przy dużej ilości wariantów (4 i więcej, ale przy 3 już wg mnie też warto) lepiej stosować instrukcję switch zamiast wielokrotnych IF.

---

Dzięki. Powiem szczerze że nie slyszlaen o switchach jako instrukcji ale poszukam :)

---

http://php.net/manual/en/control-structures.switch.php

To z jakiego Ty kursu PHP korzystałeś :) To jedna z podstawowych instrukcji obok IF.

Answer 2

Myślę, że jednak powinieneś im nadać różne name.
Możesz zrobić tak: 

<input type="radio" name="radio1">
<input type="radio" name="radio2">
<input type="radio" name="radio3">

i w PHP sprawdzić po wysłaniu formularza, czy ten input został zaznaczony:

if (isset($_POST['radio1']))
{
	//zaznaczono radio1
}	

Ja bym to zrobił w taki sposób, może ktoś ci inaczej doradzi

Comments

Name przy type=radio powinny być takie same, jeżeli mamy wybrać jedna z kilku wartości.

Answer 3

Może wystarczy coś takiego? 

<input type="radio" name="radio" class="r1">
<input type="radio" name="radio" class="r2">
<input type="radio" name="radio" class="r3">

<div></div>

.r1:checked ~ div {
  background-color: #000;
}

.r2:checked ~ div {
  background-color: #555;
}

.r3:checked ~ div {
  background-color: #999;
}

div {
  width: 100px;
  height: 100px;
}