javascript - 隐藏和显示父元素标签 JS/Jquery

Question

我在一个问题上堵了好久，自己解决不了。

我有 4 个数组。它们的起源并不重要，但我有一个数组“大陆”，其中有一些大陆。我生成复选框及其标签以在表单中显示它们。对于每个元素，我根据包含每个大陆国家/地区的其他表格的二维数组为国家/地区生成不同的标签。所以每个大陆都有自己的国家。

我想隐藏国家，只有当他选择了他的大陆时才显示它们。我已经给出了所有带有大陆名称的国家/地区的类名。

但我唯一要做的就是更改复选框的可见性。

这是我的代码片段:(我用“!!!”标记了事件)

//array of options
var continents = new Array();
continents[0] = "Africa";
continents[1] = "America";

//array of element auto selected
var africa = new Array()
africa[1] = "Egypt";
africa[0] = "Soudan";

var america = new Array()
america[1] = "USA";
america[0] = "Argentina";

var dependances = new Array(africa, america);


var cbh = document.getElementById('checkboxes');
var cap = "";

var j = "";
var t = document.getElementById('t');

// the loop is creating the checkboxes with name, value...
var classe = 0;
var x = 0;
var classDepandance = "";

for (var i in continents) {

  //cap will be the value/text of continents[i]
  var cb = document.createElement('input');
  var label = document.createElement("label");

  cap = continents[i];
  var text = document.createTextNode(cap);
  cb.type = 'checkbox';
  cbh.appendChild(cb);
  cb.name = cap;
  cb.value = cap;
  classDepandance = cap;
  label.appendChild(cb);
  label.appendChild(text);
  cbh.appendChild(label);

  // Here is the Event which would make hide or display the countries !!!
  cb.addEventListener('click', showDependancies = function() {
    $('.' + classDepandance).css("display", "none");
    console.log("You're in there");
  });

  //Generating the countries whith their continents
  if (x < dependances.length) {
    for (var y = 0; y < dependances[x].length; y++) {

      //val = value of the option.
      val = dependances[x][y]
      //cap will be the value/text of dependances[i]
      var cb = document.createElement("input");
      var label = document.createElement("label");
      cap = dependances[x][y];
      var text = document.createTextNode(cap);
      cb.type = 'checkbox';
      cbh.appendChild(cb);
      cb.name = cap;
      cb.value = cap;
      cb.className = classDepandance;

      label.appendChild(cb);
      label.appendChild(text);
      //label.className = obtionTable[i].textOption; //Class de l'élément
      cbh.appendChild(label);
    }
  }
  x++;
}

* {
  box-sizing: border-box;
}

#data {
  padding: 5px;
  width: 100vw;
}

.multiselect {
  overflow: visible;
  padding: 0;
  padding-left: 1px;
  border: none;
  width: 100vw;
  white-space: normal;
  height: 75px;
  text-align: center;
}

.checkboxes {
  height: 100px;
  width: 100px;
  border: 1px solid #000;
  background-color: white;
  margin-left: -1px;
}

label {
  display: inline-flex;
  border: 1px grey solid;
  padding: 5px;
  margin-right: 3px;
  margin-bottom: 3px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<form>
  <div id="data">
    <div class="multiselect">
      <div id="c_b">
        <table>
          <div id="checkboxes">
          </div>
        </table>
      </div>
    </div>
  </div>
</form>

感谢您的帮助!

Answer 1

由于您已经在使用 jQuery，因此这里有一种更有条理的方法。

每个大陆看起来像:

<div class="checkbox-wrap">
  <label class="continent"><input class="continent"></label>
  <label class="country"><input class="country"></label>
  <label class="country"><input class="country"></label>
</div>

当一个大陆复选框被更改并且 css 用于隐藏/显示相关国家时，类 “active” 在包装器上切换

var continents = {
  "Africa": ["Egypt", "Soudan"],
  "America": ["USA", "Argentina"]
}


$('#checkboxes').on('change', ':checkbox.continent', function() {  
  $(this).closest('.checkbox-wrap').toggleClass('active', this.checked)
});

// loop through all continents
$.each(continents, function(continent, countries) {

  // outer wrapper for each continent checkbox group
  var $checkboxWrap = $('<div>', { class: 'checkbox-wrap' });
  
  // add the main checkbox for continent
  $checkboxWrap.append(createCheckbox(continent, 'continent'));
  
  // loop through countries adding their checkboxes
  $.each(countries, function(_, country) {
    $checkboxWrap.append(createCheckbox(country, 'country'));
  });
  
  // append whole continent group to dom
  $('#checkboxes').append($checkboxWrap);

});


// helper function to create each checkbox
function createCheckbox(val, className) {
  var $label = $('<label>', { text: val, class: className }),
    $input = $('<input>', { type: 'checkbox', value: val, class: className });
  return $label.prepend($input)
}

/* CSS For countries */
label.country {
  display: none
}
.checkbox-wrap.active label.country {
  display: inline-flex;
}

/* general css */

* {
  box-sizing: border-box;
}

.checkboxes {
  height: 100px;
  width: 100px;
  border: 1px solid #000;
  background-color: white;
  margin-left: -1px;
}

label {
  display: inline-flex;
  border: 1px grey solid;
  padding: 5px;
  margin-right: 3px;
  margin-bottom: 3px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <div id="data">
    <div class="multiselect">
      <div id="c_b">
        <table>
          <div id="checkboxes">
          </div>
        </table>
      </div>
    </div>
  </div>
</form>