如何使用复选框获取多个 JSON 数组的值？

Question

HTML 和 JS

<div class="form-group form-inline text-center">
  <label for="select_category">Select Category</label>&emsp;
  <select class="custom-select" id="select_category" style="width: 500px;" onchange="listcatcb();">
    <option selected></option>
  </select>
</div>
<div class="container" id="cats">
  <div class="form-check" id="catrbs"> </div>
  <button class="btn btn-outline-secondary" onclick="nextcats();">Click Next!</button>
</div>

getallcategory();

function getallcategory() {
  var link = 'allcat.json';
  $.post(link).done(function (data) {
    data2 = JSON.stringify(data);
    var obj = jQuery.parseJSON(data2);
    for (var i = 0; i < obj.length; i++) {
      $("#select_category").append('<option value="' + obj[i].name + '">' + obj[i].name + '</option> ')
    }
  });
}

function listcatcb() {
  selcat = document.getElementById("select_category").value;
  var link = 'allcat.json';
  $.post(link).done(function (data) {
    data2 = JSON.stringify(data);
    var obj = jQuery.parseJSON(data2);
    for (var i = 0; i < obj.length; i++) {
      if (obj[i].name == selcat) {
        for (var j = 0; j < obj.length; j++) {
          $("#catrbs").append('<input class="form-check-input catcbs" type="checkbox" id="' + obj[i].siblings[
              j].name + '" value="' + obj[i].siblings[j].name + '"><label class="form-check-label" for="' +
            obj[i].siblings[j].name + '">' +
            obj[i].siblings[j].name +
            '</label><br/>')
        }
      }
    }

  });
}

function nextcats() {
  var link = 'allcat.json';
  var checkedValue = $('.catcbs:checked').val();;
  $.post(link).done(function (data) {
    data2 = JSON.stringify(data);
    var obj = jQuery.parseJSON(data2);

    for (var i = 0; i < obj.length; i++) {
      if (obj[i].name == selcat) {
        for (var j = 0; j < obj.length; j++) {

          if (obj[i].siblings[j].name == checkedValue) {
            for (var k = 0; k < obj.length; k++) {
              console.log(obj[i].siblings[j].siblings[k].name);
            }
          }
        }
      }
    }
  });
}

allcat.json

[ { "id"       : "47"
  , "name"     : "Women"
  , "parent"   : "0"
  , "status"   : "Enabled"
  , "itemcount": 44
  , "siblings": 
    [ { "id"       : "87"
      , "name"     : "Personal Care Appliances"
      , "parent"   : "47"
      , "status"   : "Enabled"
      , "itemcount": 2
      , "siblings": 
        [ { "id"       : "88"
          , "name"     : "Hair Dryers"
          , "parent"   : "87"
          , "status"   : "Enabled"
          , "itemcount": 2
          , "siblings" : [] 
      } ] } 
    , { "id"       : "127"
      , "name"     : "Jewellary"
      , "parent"   : "47"
      , "status"   : "Enabled"
      , "itemcount": 41
      , "siblings": 
        [ { "id"       : "128"
          , "name"     : "Artificial Jewellary"
          , "parent"   : "127"
          , "status"   : "Enabled"
          , "itemcount": 41
          , "siblings" : [] 
} ] } ] } ] 

在这段代码中，如果我一次选择 2 个复选框意味着我只得到第一个 JSON 值的输出......
如果我取消选中一个意味着我得到了各自的值......
我的意思是，例如，如果我从一个类别中选择女性，那么我会得到 2 个复选框，分别是 1.personal care Appliance 和 2.jewellery。
如果我一次选择多个复选框意味着我只得到吹风机（个人护理用品中的价值）但我没有得到人造珠宝（珠宝中的价值）
如果我一次选择一个意味着我得到了合适的结果，请帮我解决这个错误...
我一直卡在这里。

Answer 1

您在for loop中犯了几个错误，请检查更新的代码片段。

这里for (var j = 0; j < obj[i].siblings.length; j++)你错过了添加siblings 。

这里var checkedValue = $('.catcbs:checked').map(function(){ return $(this).val(); }).get(); ，在这里你只得到一个值，更新它以获取数组中的值。

请仔细阅读，如果您有任何困惑，请告诉我。

 const jsonData = [ { "id":"47", "name":"Women", "parent":"0", "status":"Enabled", "itemcount":44, "siblings":[ { "id":"87", "name":"Personal Care Appliances", "parent":"47", "status":"Enabled", "itemcount":2, "siblings":[ { "id":"88", "name":"Hair Dryers", "parent":"87", "status":"Enabled", "itemcount":2, "siblings":[ ] } ] }, { "id":"127", "name":"Jewellary", "parent":"47", "status":"Enabled", "itemcount":41, "siblings":[ { "id":"128", "name":"Artificial Jewellary", "parent":"127", "status":"Enabled", "itemcount":41, "siblings":[ ] } ] } ] } ]; function getallcategory() { var link = jsonData; for (var i = 0; i < link.length; i++) { $("#select_category").append('<option value="' + link[i].name + '">' + link[i].name + '</option> ') } } function listcatcb() { selcat = document.getElementById("select_category").value; var obj = jsonData; for (var i = 0; i < obj.length; i++) { if (obj[i].name == selcat) { for (var j = 0; j < obj[i].siblings.length; j++) { $("#catrbs").append('<input class="form-check-input catcbs" type="checkbox" id="' + obj[i].siblings[ j].name + '" value="' + obj[i].siblings[j].name + '"><label class="form-check-label" for="' + obj[i].siblings[j].name + '">' + obj[i].siblings[j].name + '</label><br/>') } } } } function nextcats() { var obj = jsonData; var checkedValue = $('.catcbs:checked').map(function(){ return $(this).val(); }).get(); var selectedItem=''; for (var i = 0; i < obj.length; i++) { if (obj[i].name == selcat) { for (var j = 0; j < obj[i].siblings.length; j++) { if (checkedValue.indexOf(obj[i].siblings[j].name) != -1) { for (var k = 0; k < obj.length; k++) { selectedItem += `<p>${obj[i].siblings[j].siblings[k].name}</p>`; } } } } } $('#selected-item').html(selectedItem) } getallcategory();

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script> <div class="form-group form-inline text-center"> <label for="select_category">Select Category</label>&emsp; <select class="custom-select" id="select_category" style="width: 500px;" onchange="listcatcb();"> <option selected></option> </select> </div> <div class="container" id="cats"> <div class="form-check" id="catrbs"> </div> <button class="btn btn-outline-secondary" onclick="nextcats();">Click Next!</button> </div> <div class="container" id="selected-item"> </div> </div>