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

Question

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

1

У меня есть 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/

SNaRe 03 май 2018, в 12:36

Источник

0

Использовать событие изменения и показать / скрыть ваш контент? что ты уже испробовал?
DBS 03 май 2018, в 09:52
0

document.getElementById ('first'). style.visibility = 'visible'; document.getElementById ('second'). style.visibility = 'hidden';
SNaRe 03 май 2018, в 09:53

Теги:

javascript

logic

event-handling

8 ответов

1

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

Для более простого использования добавьте общий класс в свои текстовые text-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>

Zenoo 03 май 2018, в 07:51

0

класс «Второй контент» имеет то же имя, что и первый контент. Первый раз, когда я отправил, я набрал опечатку и обновил. Это будет <div class = "second"> Second Content </ div> Это изменит ваш код? Потому что теперь у вас есть для и т. Д.
SNaRe 03 май 2018, в 10:01
0

@SNaRe Вам нужно будет дать общий класс всем вашим элементам div и использовать этот класс в querySelectorAll .
Zenoo 03 май 2018, в 10:01
0

@SNaRe Я отредактировал свой ответ указанным общим классом.
Zenoo 03 май 2018, в 10:10

Показать ещё 1 комментарий

0

(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';
    }
  });
})();

SMH 03 май 2018, в 09:06

0

Простой код ниже сначала инициализирует требуемые элементы 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

user3323791 03 май 2018, в 08:29

0

Не изменять оригинальный 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>

11AND2 03 май 2018, в 07:59

0

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

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

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>

Zohir Salak 03 май 2018, в 07:54

0

Использовать этот

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>

Saeed 03 май 2018, в 07:31

0

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

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

Deadpool 03 май 2018, в 07:30

1

ОП никогда не говорил ничего о jQuery.
Zenoo 03 май 2018, в 09:59
0

Гораздо проще и лучше ...
Deadpool 03 май 2018, в 10:00
1

Но не то, о чем спрашивал ОП.
Zenoo 03 май 2018, в 10:02

Показать ещё 1 комментарий

Ещё вопросы

Использовать событие изменения и показать / скрыть ваш контент? что ты уже испробовал?
document.getElementById ('first'). style.visibility = 'visible'; document.getElementById ('second'). style.visibility = 'hidden';
класс «Второй контент» имеет то же имя, что и первый контент. Первый раз, когда я отправил, я набрал опечатку и обновил. Это будет <div class = "second"> Second Content </ div> Это изменит ваш код? Потому что теперь у вас есть для и т. Д.
@SNaRe Вам нужно будет дать общий класс всем вашим элементам div и использовать этот класс в querySelectorAll .
@SNaRe Я отредактировал свой ответ указанным общим классом.
ОП никогда не говорил ничего о jQuery.

Nope · Accepted Answer · 2018-05-03T08-43-00.000Z

Вы можете добавить класс .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>

Моя единственная проблема в том, что у меня есть другая радио-кнопка на моей странице, первая и последняя переключатели также влияют на содержимое. Как я могу исправить эту проблему
Существует много способов решения этой проблемы: вы можете назначить кнопки, которые хотите прикрепить события к определенным атрибутам, таким как data-id="xxx" затем использовать document.querySelector('[data-id="xxx"]') привязать к ним.
если бы вы могли добавить предпочитаемый вами метод к фрагменту кода, я бы это описал. Спасибо
Полагаю, я понятия не имею, как выглядит остальная часть вашей страницы. Если у вас есть несколько групп переключателей и вы хотите применить логику только к определенному подмножеству, вам нужно добавить эти конкретные сценарии в новый вопрос, так как он отличается от текущего вопроса, и ни одно из текущих решений не будет применимо.