Affichage d'une div en fonction du choix d'un input[type=radio]

En vanilla JS !

by oilvier

HTML

<fieldset>
  <legend>Type de la recherche</legend>
  <label for="seek[mot]">
    <input type="radio" name="seek" value="mot" data-id="mot" id="seek[mot]" /> <span>mot</span></label>
  <label for="seek[text]">
    <input type="radio" name="seek" value="text" data-id="text" id="seek[text]" /> <span>date</span></label>
</fieldset>
<div id="mot" class="complementary-fields">
  <label for="prenom">Prénom:</label>
  <input type="text" id="prenom" />
  <br />
  <label for="age">Nom:</label>
  <select id="age">
    <option>21</option>
  </select>
  <br />
</div>

<div id="text" class="complementary-fields">
  toto
</div>

CSS

.no-display {
  display: none;
}

JavaScript

// https://plainjs.com/

function addEventHandler(elem, eventType, handler) {
  if (elem.addEventListener)
    elem.addEventListener(eventType, handler, false);
  else if (elem.attachEvent)
    elem.attachEvent('on' + eventType, handler);
}

function addClass(el, className) {
  if (el.classList) el.classList.add(className);
  else if (!hasClass(el, className)) el.className += ' ' + className;
}

function removeClass(el, className) {
  if (el.classList) el.classList.remove(className);
  else el.className = el.className.replace(new RegExp('\\b' + className + '\\b', 'g'), '');
}

var inputSelector 						= document.querySelectorAll('input[data-id]'),
		inputSelectorLength 			= inputSelector.length,
  	complementaryFields 			= document.getElementsByClassName('complementary-fields'),
  	complementaryFieldsLength = complementaryFields.length;

for (var i = 0; i < complementaryFieldsLength; i++) {
  addClass(complementaryFields[i], 'no-display');
}

for (var i = 0; i < inputSelectorLength; i++) {
    addEventHandler(inputSelector[i], 'change', function() {
      var id = this.getAttribute('data-id');
      var idMatch = document.getElementById(id);
      
      for (var i = 0; i < complementaryFieldsLength; i++) {
        addClass(complementaryFields[i], 'no-display');
      }
      removeClass(idMatch, 'no-display');
    });
  }