1

以下のようなラジオボタンがあります

Apple
<input type="radio" id="one" name="apple" data-price="10" value="light"/> Light
<input type="radio" id="two" name="apple" data-price="20" value="dark" /> Dark
<input type="text" id="appleqty" name="appleqty" value="" />

Mango
<input type="radio" id="three" name="Mango" data-price="30" value="light"/> Light
<input type="radio" id="one" name="Mango" data-price="40" value="dark" /> Dark
<input type="text" id="Mangoqty" name="Mangoqty" value="" />

Pine Apple
<input type="radio" id="four" name="Pineapple" data-price="50" value="light"/> Light
<input type="radio" id="five" name="Pineapple" data-price="60" value="dark" /> Dark
<input type="text" id="Pineappleqty" name="Pineappleqty" value="" />

Grape
<input type="radio" id="six" name="Grape" data-price="70" value="light"/> Light
<input type="radio" id="seven" name="Grape" data-price="80" value="dark" /> Dark
<input type="text" id="Pineappleqty" name="Pineappleqty" value="" />

これは、以下のような配列を作成する必要があります

   array
      0 => 
        array
          'apple' => string 'light' (length=10)
          'price' => string '50' (length=1)
      1 => 
        array
          'Pineapple' => string 'dark' (length=10)
          'price' => string '60' (length=1)

親切な注意：the array key should be the radio button name, the price should be taken from data-price in radio button そして、私はこの配列をシリアライズする必要があります。これは、javascriptを使用して行う必要があります。

4

1 に答える 1

3

sを繰り返す必要があります<input>。そうするために：

  1. name探している要素 (つまりapple、など)が事前にわかっている場合は、 「JavaScript では、指定されたページ内のすべてのラジオ ボタンを取得するにはどうすればよいですか」で説明されているように、それらの名前のそれぞれに対してMango実行できます。名前？.document.getElementsByName

  2. それらがわからない場合（それらは動的です）、特定の子ノードをループする方法<div>のように、指定された id でそれらをラップし、その子を反復します。

指定された のラジオを繰り返し処理しているときに、どのラジオ ボタンが選択されているかを知るために、各プロパティをname調べます。.checked

JavaScript 連想配列でキーを動的に作成するのように、キーと値のペアを使用して連想配列を構築する必要があります。

  1. <input>とname属性value。
  2. リテラルpriceとdata-price属性。属性の値getAttribute('data-price')を取得するには、を使用する必要があります。data-price

例：

function createArray() {

    var myArr = new Array();
    myArr[0] = createSubArray('apple');
    myArr[1] = createSubArray('Mango');
    myArr[2] = createSubArray('Pineapple');
    myArr[3] = createSubArray('Grape');
    return myArr;
}


function createSubArray(name) {
    var arr = new Array();
    elems = document.getElementsByName(name);
    for (var i = 0; i < elems.length; i++) {
        if (elems[i].checked) {
            arr[name] = elems[i].value;
            arr['price'] = elems[i].getAttribute('data-price');
        }
    }
    return arr;
}​

この例がこのJSFiddleで動作していることを確認できます。

于 2012-09-17T10:05:18.997 に答える