Радио кнопки + элементы массива

Question

У меня есть форма, которая может быть динамически дублирована (с помощью JS), чтобы пользователь мог ввести столько данных, сколько захочет. Это отлично работает для ввода текста, потому что я просто оставляю атрибут name одинаковым (заканчивается []), а затем, когда значения отправляются, он просто возвращает мне массив. Теперь я просто понял, что это не так хорошо работает для переключателей, потому что имена на самом деле должны быть уникальными для каждого набора. Но с точки зрения данных каждый набор возвращает только одно значение, поэтому получение данных из данных POST не будет проблемой, оно просто закручивает функциональность моей формы. Нет, не так ли? Я просто ввернута, и я не могу использовать массивы?

Answer 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"> 

, например.

Когда вы отправляете эту форму, и если вы выбираете «а» и «х», вы будете иметь массив «радиокнопку», который выглядит как

radiobutton[0] = "a"; 
radiobutton[1] = "x"; 

Это работает, потому что каждая группа имеет уникальное имя, но по-прежнему использует синтаксис массива.

Answer 2

Да. С точки зрения HTTP, как переключатели, так и флажки устанавливаются практически одинаково (кроме того, что выбор радиокнопки отменяет выбор всех остальных в группе).

Возможно, у вас есть обработчик отправки, который берет входы от наборов радиокнопки и преобразует их в кучу стандартных входов, которые превращаются в массив, но это довольно взломанно. Просто добавьте еще один код на сервере, чтобы создать собственный массив, если это то, что вам нужно.

Answer 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"> 

Но использовать маркирующие и = «» правильно, чтобы получить интерактивные этикетки и для классов псевдопользователь работать ключи массива должны быть уникальный и ассоциативный, а не численный. Так что это

<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; 

} 

Answer 4

имя = "выбор [1] []" имя = "выбор [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 
      ) 
    )