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

例如。

当您提交该表单并假设您选择“a”和“x”时，您将拥有一个类似于

的数组“radiobutton”

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

它的工作原理是因为每个组都有一个唯一的名称，但仍使用数组语法。

Answer 2

呀。从HTTP的角度来看，单选按钮和复选框几乎完全相同（除了选择一个单选按钮取消选择组中的所有其他按钮）。

你可能有一个提交处理程序，它接受来自单选按钮集的输入并将它们转换成一堆变成数组的标准输入，但这非常hacky。如果你需要的话，只需在服务器上添加一些代码来构建你自己的数组。

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

但要使用标签标签和=＆＃34;＆＃34;正确地获取可点击的标签，并且为了使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;

}

Answer 4

名=＆＃34;选择[1] []＆＃34; 名称=＆＃34;选择[2] []＆＃34;

似乎可以正常工作，所以如果您动态添加动态以及与ID相关联的内容（或者您可以每次都增加一些内容），那么您可以这样做：

var el = '<input type="radio" name="choice[' + myID + '][] />';

在一些动态生成的radiobuttons上尝试了这个，PHP $ _POST包含了这个强制性的＆＃39; ThingIDs 6,10,8的单选按钮：

[mandatory] => Array
    (
        [6] => Array
            (
                [0] => 1
            )

        [10] => Array
            (
                [0] => 1
            )

        [8] => Array
            (
                [0] => 0
            )
    )

单选按钮+数组元素

4 个答案: