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

Question

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

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

例如，在单击submit之后，我希望下面的输出基于支票簿检查。

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

当前，当我选择tests父复选框时，我将看到下面的内容

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"
    }

Answer 1

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

​

  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>

​

Answer 2

您可以使用以下代码：

​

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

​

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