CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Carnatik
Carnatik

Reputation: 15

Hide and show parent element label JS/Jquery

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 !

Upvotes: 0

Views: 312

Answers (1)

charlietfl
charlietfl

Reputation: 171669

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>

Upvotes: 2

Related Questions