Html 单选按钮 + 数组元素
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2619163/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Radio buttons + array elements
提问by mpen
I have a form that can be dynamically duplicated (with JS) so that the user can enter as much data as he wants. This works great for text inputs, because I just leave the nameattribute the same (ending with a []) and then when the values are posted, it just returns me an array. Now I just realized that this doesn't work so well for radio buttons, because the names actually need to be unique for each set. But from the data standpoint, each set only returns one value, so retrieving the data from the POST data wouldn't be a problem, it just screws up the functionality of my form. There's no way around this, is there? I'm just screwed and I can't use arrays?
我有一个可以动态复制的表单（使用 JS），以便用户可以输入任意数量的数据。这对于文本输入非常有用，因为我只是让name属性保持不变（以 a 结尾[]），然后在发布值时，它只会返回一个数组。现在我才意识到这对于单选按钮来说效果不佳，因为实际上每个集合的名称都需要是唯一的。但是从数据的角度来看，每个集合只返回一个值，所以从 POST 数据中检索数据不会有问题，它只是搞砸了我的表单的功能。没有办法解决这个问题，是吗？我只是被搞砸了，我不能使用数组？
回答by Austin Hyde
I just solved this same problem.
我刚刚解决了同样的问题。
If you have more than one group of radio buttons, you can still use them in arrays:
如果您有一组以上的单选按钮，您仍然可以在数组中使用它们：
<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">
for example.
例如。
When you submit that form, and assuming you pick "a" and "x", you will have an array "radiobutton" that looks like
当您提交该表单并假设您选择“a”和“x”时，您将拥有一个数组“radiobutton”，如下所示
radiobutton[0] = "a";
radiobutton[1] = "x";
It works because each group has a unique name, but still uses the array syntax.
它有效是因为每个组都有一个唯一的名称，但仍然使用数组语法。
回答by Yuliy
Yeah. From the perspective of HTTP, both radio buttons and checkbox sets are pretty much the same thing (except that selecting a radio button deselects all others in the group).
是的。从 HTTP 的角度来看，单选按钮和复选框集几乎是一样的（除了选择一个单选按钮会取消选择组中的所有其他按钮）。
You might be able to have a submit handler which takes the inputs from the radio button sets and converts them into a bunch of standard inputs that turn into an array, but this is quite hacky. Just put in some more code on the server to build your own array if that's what you need.
您可能能够拥有一个提交处理程序，它从单选按钮集中获取输入并将它们转换成一堆标准输入，然后变成一个数组，但这很hacky。如果您需要，只需在服务器上放入更多代码即可构建您自己的数组。
回答by Carl McDade
There is a caveat to using arrays in CSS3 and HTML5
在 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">
But to use the label tag and for="" properly to get clickable labels and for psuedo classes to work the array keys have to be unique and associative rather than numerical. So do this
但是要正确使用标签标签和 for="" 来获得可点击的标签，并且要使伪类工作，数组键必须是唯一的和关联的，而不是数字。所以这样做
<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">
Otherwise wrapping the element with the label still works but the above is cleaner and make it easier to do. An example CSS using labels to mark the elements without wrapping.
否则用标签包裹元素仍然有效，但上面的内容更清晰，更容易做到。使用标签标记元素而不换行的示例 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;
}
回答by AlreadyTriedGoogle
name="choice[1][]" name="choice[2][]"
名称="选择[1][]" 名称="选择[2][]"
Seems to work, so if you're adding dynamically and it's things associated with an ID (or you could just increment something each time maybe) then you can do:
似乎工作，所以如果你动态添加并且它是与 ID 关联的东西（或者你可以每次都增加一些东西），那么你可以这样做：
var el = '<input type="radio" name="choice[' + myID + '][] />';
Just tried this on some dynamically-generated radiobuttons and PHP $_POST contains this for the 'mandatory' radio buttons for ThingIDs 6, 10, 8:
刚刚在一些动态生成的单选按钮上尝试了这个，PHP $_POST 包含这个用于 ThingIDs 6、10、8 的“强制”单选按钮：
[mandatory] => Array
(
[6] => Array
(
[0] => 1
)
[10] => Array
(
[0] => 1
)
[8] => Array
(
[0] => 0
)
)
