jquery - 使用 .serializeArray() 对复选框值进行分组

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 字符串格式或类似格式的检查值:例如:family=familyname1&familyname2,kind=kindname1,gender=gendername2&gendername3

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

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

此外，也许我应该重新思考或重写我的 html 标记中的某些内容，请毫不犹豫地告诉我。我是表单方面最差的前端开发人员:)

Answer 1

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

代码:

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/