使用JS获取单选按钮值数组

时间:2014-12-04 10:15:26

标签: javascript arrays forms

假设我有一个这样的表格:

<form id="formid" action="?a=do" method="POST" onChange="doSomething();>
    <input type="radio" name="buttonGroup_A[1]" value="1">
    <input type="radio" name="buttonGroup_A[1]" value="3">
    <input type="radio" name="buttonGroup_A[1]" value="2">

    <input type="radio" name="buttonGroup_A[2]" value="1">
    <input type="radio" name="buttonGroup_A[2]" value="3">
    <input type="radio" name="buttonGroup_A[2]" value="2">

    <input type="radio" name="buttonGroup_B[1]" value="1">
    <input type="radio" name="buttonGroup_B[1]" value="3">
    <input type="radio" name="buttonGroup_B[1]" value="2">

    <input type="radio" name="buttonGroup_B[2]" value="1">
    <input type="radio" name="buttonGroup_B[2]" value="3">
    <input type="radio" name="buttonGroup_B[2]" value="2">

    <input type="radio" name="buttonGroup_B[3]" value="1">
    <input type="radio" name="buttonGroup_B[3]" value="3">
    <input type="radio" name="buttonGroup_B[3]" value="2">
</form>

组数(及其名称)未知。现在我想将这些数据转发到soap接口。但是,要做到这一点,我需要一个1.数组和2.所选值的数组:

结果应该是

array (
    "buttonGroup_A" => array(
        "1" => 2,
        "2" => 3
    ),
    "buttonGroup_B" => array(
        "1" => 1,
        "2" => 3,
        "3" => 2
    )
)

我基本上寻找的是函数doSomething()

function doSomething() {
    var resultArray;
    // Clever magic happens here
    return resultArray;    
}

图片的标题说明:

  • buttonGroup的索引是实体的UID
  • 如果需要,可用(或预期)的组名称(如 buttonGroup_A)可以通过soap接口加载

2 个答案:

答案 0 :(得分:1)

JavaScript数组具有数字键,因此array("buttonGroup_A"...永远不会有效。

这是我为填充对象而提出的:

function doSomething(oEvent) {
    var resultObj = {};
    var radios = $('input[type="radio"]', $('#formid'));

    // Parse group/uid regex
    var regex = /(.*)\[(\d+)\]/;

    // Get all the radios
    for(var i=0; i<radios.length; i++) {
        var radio = $(radios[i]);

        // If this isn't checked, skip it
        if(radio.is(':checked') === false) { continue; }

        var results = radio.attr('name').match(regex);
        if(results) {
            var group = results[1];
            var uid = results[2];

            // add the group/values
            if (typeof resultObj[group] === 'undefined') {
                resultObj[group] = [];
            }
            resultObj[group][uid] = radio.val();
        }            
    }
    console.log(resultObj);
}

http://jsfiddle.net/ewub9agt/4/

答案 1 :(得分:1)

&#13;
&#13;
function doSomething() {
    var results = [];
    var regex = /[\[\]]/;

    var form = document.getElementById('formid');
    var inputs = form.getElementsByTagName('input');

    for (i = 0; i < inputs.length; i++) {
        if (inputs[i].checked) {
            var parts = inputs[i].name.split(regex);
            var group = parts[0];
            var index = parts[1];

            if (results[group] == undefined) {
                results[group] = [];
            }

            results[group][index] = inputs[i].value;
        }
    }

    console.log(results);
}
&#13;
<form id="formid" action="?a=do" method="POST" onChange="doSomething();">
    <input type="radio" name="buttonGroup_A[1]" value="1">
    <input type="radio" name="buttonGroup_A[1]" value="3">
    <input type="radio" name="buttonGroup_A[1]" value="2">

    <input type="radio" name="buttonGroup_A[2]" value="1">
    <input type="radio" name="buttonGroup_A[2]" value="3">
    <input type="radio" name="buttonGroup_A[2]" value="2">

    <input type="radio" name="buttonGroup_B[1]" value="1">
    <input type="radio" name="buttonGroup_B[1]" value="3">
    <input type="radio" name="buttonGroup_B[1]" value="2">

    <input type="radio" name="buttonGroup_B[2]" value="1">
    <input type="radio" name="buttonGroup_B[2]" value="3">
    <input type="radio" name="buttonGroup_B[2]" value="2">

    <input type="radio" name="buttonGroup_B[3]" value="1">
    <input type="radio" name="buttonGroup_B[3]" value="3">
    <input type="radio" name="buttonGroup_B[3]" value="2">
</form>
&#13;
&#13;
&#13;