Радио кнопки + элементы массива
У меня есть форма, которая может быть динамически дублирована (с JS), чтобы пользователь мог ввести столько данных, сколько захочет. Это отлично работает для ввода текста, потому что я просто оставляю атрибут name одинаковым (заканчивая на []), а затем, когда значения отправляются, он просто возвращает мне массив. Теперь я просто понял, что это не так хорошо работает для переключателей, потому что имена на самом деле должны быть уникальными для каждого набора. Но с точки зрения данных каждый набор возвращает только одно значение, поэтому получение данных из данных POST не будет проблемой, оно просто закручивает функциональность моей формы. Нет, не так ли? Я просто ввернута, и я не могу использовать массивы?
Ответы
Ответ 1
Я решил эту же проблему.
Если у вас несколько групп переключателей, вы все равно можете использовать их в массивах:
<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">
например.
Когда вы отправляете эту форму и считаете, что выбрали "a" и "x", у вас будет массив "radobutton", который выглядит как
radiobutton[0] = "a";
radiobutton[1] = "x";
Это работает, потому что каждая группа имеет уникальное имя, но по-прежнему использует синтаксис массива.
Ответ 2
Да. С точки зрения HTTP, как переключатели, так и флажки устанавливаются практически одинаково (кроме того, что выбор радиокнопки отменяет выбор всех остальных в группе).
Возможно, у вас может быть обработчик отправки, который берет входные данные из наборов радиокнопков и преобразует их в кучу стандартных входов, которые превращаются в массив, но это довольно взломанно. Просто добавьте еще один код на сервере, чтобы создать собственный массив, если это вам нужно.
Ответ 3
Существует предостережение от использования массивов в CSS3 и 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">
Но для использования тега метки и для = "" правильно получать метки, доступные для вызова, а для классов psuedo для работы ключи массива должны быть уникальными и ассоциативными, а не численными. Так сделайте это
<label for="a">text</label>
<input type="radio" name="radiobutton[a]" id="a" value="a"><br>
<label for="b">text</label>
<input type="radio" name="radiobutton[b]" id="b" value="b"><br>
<label for="c">text</label>
<input type="radio" name="radiobutton[c]" id="c" value="c"><br>
<br>
<input type="radio" name="radiobutton[x]" id="x" value="x"><br>
<input type="radio" name="radiobutton[y]" id="y" value="y"><br>
<input type="radio" name="radiobutton[z]" id="z" value="z">
В противном случае обертывание элемента с помощью метки все еще работает, но вышеописанное является более чистым и упрощает его работу. Пример CSS с использованием меток для маркировки элементов без упаковки.
/* 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;
}
Ответ 4
name= "выбор [1] []"
name= "выбор [2] []"
Кажется, что нужно работать, поэтому, если вы добавляете динамически, и все, что связано с идентификатором (или вы можете просто увеличивать что-то каждый раз, возможно), вы можете сделать:
var el = '<input type="radio" name="choice[' + myID + '][] />';
Просто попробовал это на некоторых динамически генерируемых радиообменах, а PHP $_POST содержит это для "обязательных" переключателей для ThingIDs 6, 10, 8:
[mandatory] => Array
(
[6] => Array
(
[0] => 1
)
[10] => Array
(
[0] => 1
)
[8] => Array
(
[0] => 0
)
)
