Показывать контент на основе радио-опции, нажмите с Javascript

Question

У меня есть 2 радио кнопки.

Я хотел бы показать div, когда выбрано радио. По умолчанию должно быть выбрано значение по умолчанию и отображается содержимое.

<div class="m-form__group form-group row">
  <div class="col-9">
    <div class="m-radio-inline mt-3">
      <label class="m-radio">
        <input type="radio" name="type" value="1"  checked> First
        <span></span>
      </label>
      <label class="m-radio">
        <input type="radio" name="type" value="2" required=""> Second
        <span></span>
      </label>
    </div>
  </div>
</div>

<div class="first">First Content</div>
<div class="second">Second Content</div>

Каков наилучший способ сделать это с помощью Javascript? Мой код https://jsfiddle.net/cbkm9vxg/

Answer 1

Простой код, приведенный ниже, сначала инициализирует необходимые элементы html dom, а затем связывает событие.

var firstContent, secondContent;

   function initialize() {
    firstContent = $('.first');
    secondContent = $('.second');
   }

   function bindEvents() {
    $('[type="radio"]').on('change', function() {
    render();
    });
   }

   function render() {
    if(1 == $('[type="radio"]:checked').val()) {
    firstContent.show();
    secondContent.hide();
    } else {
    firstContent.hide();
    secondContent.show();
    }
   }

   initialize();
   bindEvents();
   render();

Js Fiddle Link

Answer 2

(function() {
  document.querySelector('.second').style.display = 'none';

  document.querySelector('.m-radio-inline').addEventListener('click', function(event) {
    let traget = event.target.querySelector('input');
    let targetValue = traget && traget.value;
    if (targetValue) {
      document.querySelector(`.${targetValue}`).style.display = 'block';
      document.querySelector(`.${targetValue == 'second'?'first': 'second'}`).style.display = 'none';
    }
  });
})();

Answer 3

Не меняется исходный HTML.

<div class="m-form__group form-group row">
  <div class="col-9">
    <div class="m-radio-inline mt-3">
      <label class="m-radio">
        <input type="radio" name="type" value="1"  checked> First
        <span></span>
      </label>
      <label class="m-radio">
        <input type="radio" name="type" value="2" required=""> Second
        <span></span>
      </label>
    </div>
  </div>
</div>

<div class="first">First Content</div>
<div class="second">Second Content</div>



<script type="text/javascript">

  var _tinputs = document.getElementsByTagName('input');

  for (var i = 0; i < _tinputs.length; i++) {
    _tinputs[i].onclick = function(evt) {
      var _firstdiv = document.querySelectorAll('.first')[0];
      var _secdiv = document.querySelectorAll('.second')[0];

      var _clicked_val = this.value;

      if (_clicked_val === '1') {
        _firstdiv.style.visibility = 'visible';
        _secdiv.style.visibility = 'hidden';
      }
      if (_clicked_val === '2') {
        _secdiv.style.visibility = 'visible';
        _firstdiv.style.visibility = 'hidden';
      }
    };
  }

  //set default
  document.querySelectorAll('.second')[0].style.visibility = 'hidden';
</script>

Answer 4

Вы можете добавить класс .hidden, чтобы скрыть элемент, назначить его по умолчанию, а затем добавлять / удалять по мере необходимости при щелчке радиоэлементов.

// radio element click event handler
var radioClickHandler = function() {
  var first = document.querySelector('.first');
  var second = document.querySelector('.second');

  // show/hide required elements depending on which radio element was clicked.
  if (this.value == 1) {
    first.classList.remove('hidden');
    second.classList.add('hidden');
  } else {
    first.classList.add('hidden');
    second.classList.remove('hidden');
  }
}

// Get All Radio Elements
var radios = document.querySelectorAll('[type=radio]');

// Apply click event
for (var i = 0; i < radios.length; i++) {
  radios[i].addEventListener('click', radioClickHandler);
}

// Apply Default
radioClickHandler.apply(radios[0]);

/*hides element*/
.hidden {
  display: none;
}

<div class="m-form__group form-group row">
  <div class="col-9">
    <div class="m-radio-inline mt-3">
      <label class="m-radio">
        <input type="radio" name="type" value="1"  checked> First
        <span></span>
      </label>
      <label class="m-radio">
        <input type="radio" name="type" value="2" required=""> Second
        <span></span>
      </label>
    </div>
  </div>
</div>

<div class="first">First Content</div>
<div class="second">Second Content</div>

Answer 5

Это довольно просто, поэтому я пойду с простым ответом.

Если вы не можете понять это самостоятельно, тогда вам будет проще понять это.

function onClick(e){
	if (e.target.value == 1) 
	{
		document.querySelector('.first').style.display='block';
		document.querySelector('.second').style.display='none';
	}
	else if (e.target.value == 2)
	{
		document.querySelector('.first').style.display='none';
		document.querySelector('.second').style.display='block';
	}
}

<div class="m-form__group form-group row">
  <div class="col-9">
    <div class="m-radio-inline mt-3">
      <label class="m-radio">
        <input type="radio" onclick="onClick(event);" name="type" value="1"  checked> First
        <span></span>
      </label>
      <label class="m-radio">
        <input type="radio" onclick="onClick(event);" name="type" value="2" required=""> Second
        <span></span>
      </label>
    </div>
  </div>
</div>

<div  class="first">First Content</div>
<div style="display:none;" class="second">Second Content</div>

Answer 6

Используйте это

document.getElementById('firstDiv').style.display = 'block';
document.getElementById('secondDiv').style.display = 'none';

function onChangeRadio() {

  var x = document.getElementById('first').checked;

  if (x) {
    document.getElementById('firstDiv').style.display = 'block';
    document.getElementById('secondDiv').style.display = 'none';
  } else {
    document.getElementById('firstDiv').style.display = 'none';
    document.getElementById('secondDiv').style.display = 'block';
  }

}

<div class="m-form__group form-group row">
  <div class="col-9">
    <div class="m-radio-inline mt-3">
      <label class="m-radio">
        <input onclick="onChangeRadio()" id="first" type="radio" name="type" value="1"  checked> First
        <span></span>
      </label>
      <label class="m-radio">
        <input onclick="onChangeRadio()" id="second" type="radio" name="type" value="2" required=""> Second
        <span></span>
      </label>
    </div>
  </div>
</div>

<div id="firstDiv" class="first">First Content</div>
<div id="secondDiv" class="second">Second Content</div>

Answer 7

Я думаю, вы ищете что-то вроде этого:

<html>

<head>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<style>
#div1{background:red;}
#div2{background:blue;}
.hidden{display:none;}
</style>

</head>

<input id="radio1" type="radio" name="radio1">red
<input id="radio2" type="radio" name="radio1">blue

<div id="div1">Red</div>
<div id="div2" class="hidden">Blue</div>

<script>

$(document).ready(function(){
$('#radio1').click(function(){
	$('div').hide();
	$('#div1').show();
});
$('#radio2').click(function(){
	$('div').hide();
	$('#div2').show();
});
});

</script>	

</body>

</html>

Answer 8

Вам необходимо добавить прослушиватель событий change на свои радиобоксы.

Для более легкого использования, добавьте общий класс к вашему тексту div (здесь text-div) .

Внутри обработчика событий проверьте, проверен ли ввод с помощью this.checked, скройте все .text-div деления и покажите только тот, индекс которого аналогичен значению радиобокса (- 1, потому что это 0- индексированный массив) :

let elements = document.querySelectorAll(".m-radio input");

let myFunction = function() {
  if(this.checked){
    //Get all your text divs
    let els = document.querySelectorAll('.text-div');
    for(let el of els){
      //Hide them all
      el.style.display = 'none';
    }
    //Only show the one with the same index as the radiobox value - 1
    els[(+this.value) - 1].style.display = 'block';
    
  }
};

//Attach your event handler for every radiobox
for (let element of elements) {
    element.addEventListener('change', myFunction, false);
}

//Show the first text div at the start
document.querySelectorAll('.text-div')[0].style.display = 'block';

.text-div{
  display: none;
}

<div class="m-form__group form-group row">
  <div class="col-9">
    <div class="m-radio-inline mt-3">
      <label class="m-radio">
        <input type="radio" name="type" value="1"  checked> First
        <span></span>
      </label>
      <label class="m-radio">
        <input type="radio" name="type" value="2" required=""> Second
        <span></span>
      </label>
    </div>
  </div>
</div>

<div class="text-div first">First Content</div>
<div class="text-div second">Second Content</div>