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

Question

I'm blocking on a problem for a long time and I son't succeed in resolving it by myself.

I have 4 array. Their origin is not important, but I have an array "continent" which has some continent. I generate the checkbox and their label to display them in the form. For each element I generate the différents labels for countries according to a 2D array based on the other table containing the country for each continent. So each continent has his own countries.

I would like to hide the countries, and display them only when his continent his selected. I already give a className of all the countries whith the name of the continent.

But the only thing I'm doing is to change the visibility of the checkboxes.

Here is a snippet of my code : (I marked the event with "!!!")

 //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> 

Thank you for your help !

Answer 1

Since you are already using jQuery here's a more organized approach.

Each continent looks like:

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

A class "active" is toggled on wrapper when a continent checkbox is changed and css is used to hide/show the associated countries

 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>