Mam formularz, który można dynamicznie duplikować (przy użyciu JS), aby użytkownik mógł wprowadzić dowolną ilość danych, zgodnie z własnym życzeniem. Działa to doskonale do wprowadzania tekstu, ponieważ po prostu zostawiam atrybut name
tak samo (kończący się na []
), a następnie, gdy wartości zostaną opublikowane, po prostu zwrócą mi tablicę. Teraz właśnie zdałem sobie sprawę, że to nie działa tak dobrze dla przycisków radiowych, ponieważ nazwy muszą być unikalne dla każdego zestawu. Ale z punktu widzenia danych, każdy zestaw zwraca tylko jedną wartość, więc pobieranie danych z danych POST nie stanowiłoby problemu, a jedynie podkręcało funkcjonalność mojego formularza. Nie ma sposobu, prawda? Jestem po prostu przykuty i nie mogę używać tablic?Przyciski radiowe + elementy tablicy
Odpowiedz
Właśnie rozwiązałem ten sam problem.
Jeśli masz więcej niż jedną grupę przycisków radiowych, nadal można korzystać z nich w tablicach:
<input type="radio" name="radiobutton[0]" value="a"><br>
<input type="radio" name="radiobutton[0]" value="b"><br>
<input type="radio" name="radiobutton[0]" value="c"><br>
<br>
<input type="radio" name="radiobutton[1]" value="x"><br>
<input type="radio" name="radiobutton[1]" value="y"><br>
<input type="radio" name="radiobutton[1]" value="z">
na przykład.
Po przesłaniu tego formularza, a zakładając, że pick „a” i „X”, trzeba będzie tablicę „RadioButton”, który wygląda jak
radiobutton[0] = "a";
radiobutton[1] = "x";
To działa, ponieważ każda grupa ma unikalną nazwę, ale nadal używa składni tablic.
Tak. Z perspektywy HTTP zarówno przyciski opcji, jak i zestawy pól wyboru to prawie to samo (z wyjątkiem tego, że zaznaczenie przycisku radiowego usuwa zaznaczenie wszystkich pozostałych w grupie).
Możliwe, że będziesz mógł mieć program do przesyłania, który pobiera dane z zestawów przycisków radiowych i konwertuje je na kilka standardowych danych wejściowych, które zmieniają się w tablicę, ale jest to dość hacky. Po prostu dodaj trochę kodu na serwerze, aby zbudować własną tablicę, jeśli tego potrzebujesz.
* westchnienie * Tak ... Domyślam się, że będę musiał to zrobić. Spędziłem godziny, pracując nad tym, aby wszystko inne działało w inny sposób, a następnie spróbowałem dodać do mojego formularza mały przycisk tak/nie, a cała sprawa eksploduje katastrofalnie. – mpen
Jeśli to tylko tak-nie: dlaczego jest to przycisk radiowy? Po prostu zaznacz pole wyboru: – Yuliy
@Yulify: Myślałem o tym, ale nadal nie rozwiązuje problemu. Przeglądarki nie wysyłają wartości w ogóle, jeśli nie są zaznaczone. W związku z tym nie można powiązać formularza, którego odpowiadają pola wyboru. – mpen
Jest zastrzeżenie do korzystania z tablic w CSS3 i HTML5
<input type="radio" name="radiobutton[0]" value="a"><br>
<input type="radio" name="radiobutton[0]" value="b"><br>
<input type="radio" name="radiobutton[0]" value="c"><br>
<br>
<input type="radio" name="radiobutton[1]" value="x"><br>
<input type="radio" name="radiobutton[1]" value="y"><br>
<input type="radio" name="radiobutton[1]" value="z">
Jednak aby użyć tagu etykiety i = „” właściwie dostać klikalne etykiet i dla klas psuedo pracować klucze tablicy muszą być unikalny i asocjacyjny, a nie numeryczny. Zrobić to w ten sposób, że w przeciwnym razie zawijanie elementu z etykietą nadal działa, ale powyższe jest czystsze i łatwiejsze do wykonania. Przykładowy CSS z etykietami do oznaczania elementów bez zawijania.
/* SQUARED Four */
.squaredFour {
height: 30px;
margin: 10px auto;
position: relative;
}
.squaredFour input
{
top: -28px;
left: 0px;
position: relative;
border: 1px solid #999;
}
.squaredFour .element-description
{
display: block;
margin: 0;
position: absolute;
}
.squaredFour label {
cursor: pointer;
position: absolute;
width: 33px;
height: 30px;
top: -40px;
background-color: rgb(200, 242, 163);/*background-color: #c8f2a3;*/
display: block;
color:#111;
}
.squaredFour label span.a{
position: absolute;
height: 4px;
top: 18px;
left: 7px;
background-color: #111;
display: block;
color:#111;
-moz-transform: rotate(40deg);
-ms-transform: rotate(40deg);
-o-transform: rotate(40deg);
transform: rotate(40deg);
width: 10px;
}
.squaredFour label span.b{
position: absolute;
width: 18px;
height: 4px;
top: 14px;
left: 10px;
background-color: #111;
display: block;
color:#111;
-webkit-transform: rotate(128deg);
-moz-transform: rotate(128deg);
-ms-transform: rotate(128deg);
-o-transform: rotate(128deg);
transform: rotate(128deg);
}
.squaredFour label span.c{
position: absolute;
right: 12px;
top:3px;
display: block;
color:#111;
text-wrap: none;
}
.squaredFour input:checked ~ label {
display:block;
background-color: #f16870;
}
.squaredFour input:checked ~ label span.a{
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
width: 21px;
top: 13px;
left: 6px;
}
.squaredFour input:checked ~ label span.b{
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
top: 13px;
left: 6px;
width: 21px;
}
To nie ma sensu. HTML nie dba o nawiasy kwadratowe, tylko PHP interpretuje je jako "tablice". http://jsfiddle.net/mnpenner/vcysubch/ Działa dobrze z numerycznymi, powtarzającymi się nazwami. Etykiety Atrybut "dla" odpowiada identyfikatorowi wejściowemu, a nie nazwom. – mpen
jest to związane z używaniem pseudo klas i przechwytywaniem zdarzenia kliknięcia za pomocą CSS3 –
Czy możesz zaktualizować swój przykład, aby dołączyć odpowiedni CSS? – mpen
name = "wybór [1] []" name = "wybór [2] []"
wydaje się działać, więc jeśli dodajesz dynamicznie i to rzeczy związane z identyfikatorem (lub może po prostu zwiększyć coś za każdym razem może) to można zrobić:
var el = '<input type="radio" name="choice[' + myID + '][] />';
prostu próbowałem to na niektórych dynamicznie generowanych radiobuttons i PHP $ _POST zawiera to za „obowiązkowe” przycisków radiowych ThingIDs 6, 10 , 8:
[mandatory] => Array
(
[6] => Array
(
[0] => 1
)
[10] => Array
(
[0] => 1
)
[8] => Array
(
[0] => 0
)
)
- 1. Przyciski radiowe Yii
- 2. Przyciski radiowe Knockoutjs
- 3. Zamiast tego przyciski radiowe wyglądają jak przyciski.
- 4. Przyciski radiowe w bootstrapie.form-horizontal
- 5. Django BooleanField jako przyciski radiowe?
- 6. Mieszanie przyciski radiowe i text_field
- 7. Firefox pamięta niepoprawnie przyciski radiowe
- 8. javascript wyboru przyciski radiowe automatycznie
- 9. Wielofunkcyjne przyciski radiowe w systemie Android?
- 10. przyciski radiowe znikają w IE i chrom
- 11. Dwa przyciski radiowe mają jeden "identyfikator"?
- 12. Korzystanie Twitter Bootstrap przyciski radiowe z kolbą
- 13. różnica między onClick() i onChange() (przyciski radiowe)
- 14. Wyrównaj przyciski radiowe wewnątrz grupy radiowej
- 15. Sprawdzanie i odznaczając radiowe przyciski z jQuery Mobile
- 16. Jak wyrównać przyciski radiowe w poziomie w materiale kątowym?
- 17. Jak dynamicznie dodawać przyciski radiowe zgodnie z podaną liczbą zliczeń?
- 18. jQuery: zaznacz pola wyboru zachowywać się jak przyciski radiowe?
- 19. Przyciski radiowe i .attr ("sprawdzone", "sprawdzone") NIE działają w IE7
- 20. Przyciski radiowe Ustaw sprawdzony stan za pomocą kodu
- 21. Ruby on Rails przyciski radiowe do odbioru wybrać
- 22. Sprawdź elementy tablicy ciąg zawiera tylko elementy w innej tablicy
- 23. losowanie elementy tablicy
- 24. Elementy tablicy dereferencyjnej PHP
- 25. Przyciski radia WinForms
- 26. Zastąp elementy przekątnej w tablicy
- 27. jQuery - elementy dostępowe w tablicy
- 28. Policz rosnące elementy w tablicy
- 29. Elementy tablicy C++ kolejność konstrukcji
- 30. Przelotowe elementy tablicy w JavaScript
Arghh ... to takie proste>.
mpen
dlaczego nie działa, gdy po prostu wstawiamy [] zamiast [0], [1]. Umieszczenie [] działa dobrze przy wprowadzaniu tekstu, ale nie działa z przyciskami radiowymi. arrgggg – Ataman
@Ataman: ponieważ jeśli masz po prostu 'name =" radiobutton [] "', przeglądarka nie może rozróżnić dwóch różnych grup i zamiast tego sądzi, że wszystkie są częścią jednej grupy o nazwie "radiobutton []" . Potrzebujesz indeksów tablicy, aby jednoznacznie zidentyfikować różne grupy przycisków radiowych. –