如何在jquery中获取复选框选定的对象

How to get checkbox selected object in jquery

本文关键字:对象 复选框 获取 jquery      更新时间:2023-09-26

嗨,到目前为止,我的代码 https://jsfiddle.net/Harsh343/LcL38dos/5/

如何获取所选复选框的对象

例如,我希望在单击提交后,根据检查的支票簿进行以下输出。

"getafixTest2": {
  "testCategory": {
    "tests": [
      "stress",
      "common",
      "tests"
    ],
    "api": [
      "baremetal",
      "orchestration"
    ],
    "scenario": [
      "something"
    ]
  },
  "testDescription": "this is a getafix cloud test",
  "testName": "getafixTest2",
  "cloudName": "getafix"
}

目前,当我选择测试和 api 父复选框时,我得到以下

Object {tests: Array[3], tests,api: Array[5]}

但我想要这个

Object {tests: Array[3], api: Array[2]}
 "tests": [
    "stress",
    "common",
    "tests"
  ],
  "api": [
    "baremetal",
    "orchestration"
  ]

任何帮助都非常感谢。

我如何获得这样的输出

 "getafixTest2": {
      "testCategory": {
        "tests": [
          "stress",
          "common",
          "tests"
        ],
        "api": [
          "baremetal",
          "orchestration"
        ],
        "scenario": [
          "something"
        ]
      },
      "testDescription": "this is a getafix cloud test",
      "testName": "getafixTest2",
      "cloudName": "getafix"
    }

您可以执行一个简单的基于迭代的解决方案,例如

  var data = {
    "getafixTest2": {
      "testCategory": {
        "tests": [
          "stress",
          "common",
          "tests"
        ],
        "api": [
          "baremetal",
          "orchestration"
        ],
        "scenario": [
          "something"
        ]
      },
      "testDescription": "this is a getafix cloud test",
      "testName": "getafixTest2",
      "cloudName": "getafix"
    }
  };
  for (name in data) {
    categoryObject = data[name].testCategory;
    var testName = name;
    var testDescription = data[name].testDescription;
    var cloudName = data[name].cloudName;
  }
  dataHtml = 'Test Name: <input id="testNameId" type="text" value="' + testName + '"/><br><br>';
  dataHtml += '<input id="cloudNameId" type="hidden" value="' + cloudName + '"/>';
  dataHtml += '<input id="categoryObject" type="hidden" value="' + testName + '"/><br>';
  dataHtml += 'Test Description: <input type="text" id="testDescriptionId" value="' + testDescription + '"/><br><br>';
  // dataHtml += '<select id="users_list" name="users_list" multiple="multiple" size="15">';
  dataHtml += '<ul>';
  for (catName in categoryObject) {
    categoryName = catName;
    categoryType = categoryObject[catName];
    $("#categoryName").text(categoryName);
    dataHtml += '<li><input type="checkbox" name="parent_list[]" value="' + categoryName + '" />' + categoryName;
    dataHtml += '<ul>';
    for (type in categoryType) {
      dataHtml += '<li><input type="checkbox" name="child_list[]" value="' + categoryType[type] + '" />' + categoryType[type] + '</li>';
    }
    dataHtml += '</ul></li>'
  }
  dataHtml += '<input type="button" id="submit_data" value="Submit data" />';
  $('body').append(dataHtml)
  $('input[type=checkbox]').click(function() {
    $(this).parent().find('li input[type=checkbox]').prop('checked', $(this).is(':checked'));
    var sibs = false;
    $(this).closest('ul').children('li').each(function() {
      if ($('input[type=checkbox]', this).is(':checked')) sibs = true;
    })
    $(this).parents('ul').prev().prop('checked', sibs);
  });
  $("#submit_data").click(function() {
    var obj = {};
    $('input[name="parent_list[]"]:checked').each(function() {
      obj[this.nextSibling.nodeValue] = $(this).next().find('input:checked').map(function() {
        return this.nextSibling.nodeValue;
      }).get();
    })
    console.table(obj);
    $("#demo").html(JSON.stringify(obj, null, 2));
  });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<pre id="demo">
</pre>

您可以使用以下代码:

$('input[type=checkbox]:checked')

这将返回所有选定的复选框。