單選按鈕+數組元素

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