web-dev-qa-db-ja.com

ラジオボタン+配列要素

ユーザーが必要なだけのデータを入力できるように、（JSを使用して）動的に複製できるフォームがあります。これはテキスト入力に最適です。name属性を同じままにして（[]で終わる）、値が送信されると、配列が返されるだけだからです。名前は実際にはセットごとに一意である必要があるため、これはラジオボタンではうまく機能しないことに気づきました。ただし、データの観点からは、各セットは1つの値しか返さないため、POSTデータからデータを取得することは問題ではなく、フォームの機能を台無しにするだけです。方法はありません。このあたりにありますか？私はただねじ込まれていて、配列を使用できませんか？

htmlhttppost
16
mpen

私はこれと同じ問題を解決しました。

ラジオボタンのグループが複数ある場合でも、それらを配列で使用できます。

<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[0] = "a";
radiobutton[1] = "x";

各グループには一意の名前があるため機能しますが、それでも配列構文を使用します。

27
Austin Hyde

ええ。 HTTPの観点からは、ラジオボタンとチェックボックスセットはほとんど同じです（ラジオボタンを選択すると、グループ内の他のすべての選択が解除される点が異なります）。

ラジオボタンセットから入力を受け取り、それらを配列に変換する一連の標準入力に変換する送信ハンドラーを使用できる場合がありますが、これはかなりハックです。必要に応じて、サーバーにコードを追加して独自の配列を作成するだけです。

3
Yuliy

name = "choice [1] []" name = "choice [2] []"

動作しているように見えるので、動的に追加していて、それがIDに関連付けられている場合（または、毎回何かをインクリメントすることもできます）、次のことができます。

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

動的に生成されたいくつかのラジオボタンでこれを試してみました。PHP $ _POSTには、ThingID 6、10、8の「必須」ラジオボタン用にこれが含まれています。

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

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

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

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 = ""を適切に使用してクリック可能なラベルを取得し、疑似クラスを機能させるには、配列キーを数値ではなく一意で連想させる必要があります。だからこれを行う

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

}
0
Carl McDade