Question

首先我只是开始使用jQuery所以请不要忍受我！

我正在尝试将我的数据转换为以下格式...

{
"qualifications": [
    "1",
    "7"
],
units: [
    "7",
    "3",
    "1"
]
}

HTML就是......

        <div class="control-group ">
    <label for="qualifications" class="control-label required">Qualifications</label>
    <div id="qual-holder" class="controls">
        <table class="table">
            <tbody>
                <tr>
                    <td>Induction</td>
                    <td>
                        <div class="switch" data-on-label="In" data-on="info" data-off-label="Out">
                            <input id="qual" name="qual[1]" type="checkbox" value="1">
                        </div>
                    </td>
                </tr>
                <tr>
                    <td>LearnerZone Academy</td>
                    <td>
                        <div class="switch" data-on-label="In" data-on="info" data-off-label="Out">
                            <input id="qual" name="qual[7]" type="checkbox" value="7">
                        </div>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</div>
<div class="control-group ">
    <label for="units" class="control-label required">Units</label>
    <div id="unit-holder" class="controls">
        <table class="table">
            <tbody>
                <tr>
                    <td>Data Protection (DP1)</td>
                    <td>
                        <div class="switch" data-on-label="In" data-on="info" data-off-label="Out">
                            <input id="unit" name="unit[7]" type="checkbox" value="7">
                        </div>
                    </td>
                </tr>
                <tr>
                    <td>Equal Opportunities (EQ1)</td>
                    <td>
                        <div class="switch" data-on-label="In" data-on="info" data-off-label="Out">
                            <input id="unit" name="unit[3]" type="checkbox" value="3">
                        </div>
                    </td>
                </tr>
                <tr>
                    <td>Health &amp; Safety (HS1)</td>
                    <td>
                        <div class="switch" data-on-label="In" data-on="info" data-off-label="Out">
                            <input id="unit" name="unit[1]" type="checkbox" value="1">
                        </div>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</div>

最后我的非工作jQuery ......

function questionCount() {
// Create the arrays
var qualifications = [];
var units = [];

// Search the DOM for checked quals
$.each('input[name="qual[]"]:checked', function() {
    // This creates an object
    var value = $(this).val();
    qualifications.push(value);
});

// Search the DOM for checked units
$.each('input[name="unit[]"]:checked', function() {
    // This creates an object
    var value = $(this).val();
    units.push(value);
});

alert("Qualifications = " + JSON.stringify(qualifications) + " Units = " + JSON.stringify(units));
}

$("input[type=checkbox]").on( 'change', questionCount() );

这个想法是用户会检查一个或多个复选框，然后我可以将其传递给ajax调用以缩小选择计数。

有人能帮助我吗？

Answer 1

<强> jsFiddle

从复选框名称中删除值，使它们变为：

<input id="qual" name="qual[]" type="checkbox" value="1">
                           ^ nothing in here
<input id="unit" name="unit[]" type="checkbox" value="7">

您的.each也是错误的。你传递一个字符串作为第一个参数，但你需要用jQuery $()包装选择器，改为：

$.each($('input[name="qual[]"]:checked'), function() {

和

$.each($('input[name="unit[]"]:checked'), function() {

然后是你最后的JSON：

var json = JSON.stringify({ qualifications : qualifications, units : units });

输出（全部选中）：

{
    "qualifications": [
        "1",
        "7"
    ],
    "units": [
        "7",
        "3",
        "1"
    ]
}

从动态复选框创建JSON对象

1 个答案: