单选按钮+数组元素

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

例如。

当您提交该表格，并假设你选择“是”和“X”，你将有一个阵列“单选按钮”，看起来像

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] []” NAME = “选择[2] []”

似乎工作，所以如果你动态地添加和它与ID相关联的东西（或者你可以只增加每次或许真的），那么你可以这样做：

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