Question

我有一组复选框，其中包含：

1个家庭
- 很多种
- 很多种
  - 很多性别
  - 很多性别

我有以下HTML：

<form>
<input type="checkbox" name="family" value="familyname1" id="familyname1">
    <fieldset>
        <ul>
            <li id="group1">
                <input type="checkbox" name="kind" value="kindname1" id="kindname1" />
                <ul>
                    <li>
                       <input type="checkbox" name="gender" id="gendername1" value="gendername1" /></li>
                    <li><input type="checkbox" name="gender" id="gendername2" value="gendername2" /></li>
                </ul>
            </li>
            <li id="group2">
                <input type="checkbox" name="kind" value="kindname2" id="kindname2">
                <ul>
                    <li>
                       <input type="checkbox" name="gender" id="gendername3" value="gendername3"></li>
                    <li><input type="checkbox" name="gender" id="gendername4" value="gendername4"></li>
                </ul>
            </li>
        </ul>
    </fieldset>
    <input type="submit" value="ok">
</form>
<div id="result"></p> <--- To display the result of my tests

在提交时，我需要使用以下JSON字符串格式或类似内容向我的dev提供已检查的值：例如：family = familyname1＆amp; familyname2，kind = kindname1，gender = gendername2＆amp; gendername3

事实上，我需要按家庭，种类和性别对价值进行分组......

我尝试使用.serializeArray()方法获取某些内容，但我没有成功。

另外，也许我应该重新思考或重写我的html标签中的内容，不要犹豫告诉我。我是形式最糟糕的前锋：）

Answer 1

您可以构建一个存储排序顺序的数组，然后使用serializeArray获取对象数组中的表单元素，并使用jQuery map和js join获取最终字符串。

代码：

var sortOrders = {
    "family": 1,
        "kind": 2,
        "gender": 3
};

$('#demo').click(function () {

    var arr = $('form').serializeArray()

    $('#result').text(arr.sort(function (a, b) {
        return sortOrders[a.name] > sortOrders[b.name] ? 1 : -1;
    }).map(function (elem) {
        return elem.name + '=' + elem.value;
    }).join("&"));

});

演示：http://jsfiddle.net/IrvinDominin/W9Qu5/

使用.serializeArray（）对复选框值进行分组

1 个答案: