将复选框的属性值插入javascript中的数组

Question

我有多个具有这样的值的形式的复选框

<input type="checkbox" value="100400020719-006" name="selected" class="inforID" id="ABS-02072019" plant="VDNF" flowno="FLW-000001">

当选中复选框并按下按钮时，我将获取属性并将其插入ID为arr输入中

<input type="hidden" id="arr" name="arr" /> 

$(document).ready(function() {
    $("#btnConf").click(function(){
        var selected = [];
        $.each($("input[name='selected']:checked"), function () {
            selected.push($(this).val(), $(this).attr("id"), $(this).attr("plant"), $(this).attr("flowno"));
            document.getElementById("arr").value = selected;
        });
        console.log(selected);
    });
});

但是我得到的数组是

<input type="hidden" id="arr" name="arr" value="100400020719-006,ABS-02072019,VDNF,FLW-000001,100400020719-007,ABS-02072019,VDNF,FLW-000001">

我如何获得这样的数组：

[
    {
        "DocNo":"100400020719-006",
        "NewDocNo":"ABS-02072019",
        "Plant":"VDNF",
        "FlowNow":"FLW-000001"
    },
    {
        "DocNo":"100400020719-007",
        "NewDocNo":"ABS-02072019",
        "Plant":"VDNF",
        "FlowNow":"FLW-000001"
    }
]

或者像这样

[
    {
        "100400020719-006",
        "ABS-02072019",
        "VDNF",
        "FLW-000001"
    },
    {
        "100400020719-007",
        "ABS-02072019",
        "VDNF",
        "FLW-000001"
    }
]

非常感谢

Answer 1

将选定的复选框属性值作为JS对象插入selected数组

 $(document).ready(function() { $("#btnConf").click(function() { var selected = []; $.each($("input[name='selected']:checked"), function() { selected.push({ "DocNo": $(this).val(), "NewDocNo": $(this).attr("id"), "Plant": $(this).attr("plant"), "FlowNow": $(this).attr("flowno") }); document.getElementById("arr").value = selected; }); console.log(selected); }); }); 

Answer 2

您可以只对数据进行stringify并将其设置在隐藏框中。 您可以parse和使用任何您想要的地方。

 $(document).ready(function() { $("#btnConf").click(function(){ var selected = []; $.each($("input[name='selected']:checked"), function () { selected.push({ "DocNo": $(this).val(), "NewDocNo": $(this).attr("id"), "Plant": $(this).attr("plant"), "FlowNow": $(this).attr("flowno") }); $("#arr").val(JSON.stringify(selected)); }); console.log(JSON.stringify(selected)); }); }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <input type="checkbox" value="100400020719-006" name="selected" class="inforID" id="ABS-02072019" plant="VDNF" flowno="FLW-000001"> <input type="checkbox" value="100400020719-007" name="selected" class="inforID" id="ABS-02072018" plant="VDND" flowno="FLW-000002"> <input type="hidden" id="arr" name="arr" /> <input type="button" value="get" id="btnConf"/> 

Answer 3

将您的信息作为对象推送到selected数组中。 在处理结束时，使用JSON.stringify将对象更改为字符串并将其存储在隐藏变量中。

 $(document).ready(function() { var selected = []; $("#btnConf").click(function() { selected = []; $.each($("input[name='selected']:checked"), function() { selected.push({ DocNo: $(this).val(), NewDocNo: $(this).attr("id"), Plant: $(this).attr("plant"), FlowNow: $(this).attr("flowno") }); }); $("#arr").val(JSON.stringify(selected)); console.log($("#arr").val()); }); }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <input type="checkbox" checked="checked" value="100400020719-006" name="selected" class="inforID" id="ABS-02072019" plant="VDNF" flowno="FLW-000001"> <input type="checkbox" value="100400020719-006" name="selected" class="inforID" id="ABS-02072019" plant="VDNF" flowno="FLW-000001"> <button id="btnConf">Configure</button> <input type="hidden" id="arr" name="arr" />