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 objects插入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" />

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

3 个答案: