Показать/скрыть DIV с помощью радиокнопок

11 мая 2021, 00:30

Я совсем новичок в JS, помогите, пожалуйста, разобраться.

Есть три разных DIV-блока, каждый из которых "привязан" к одной из трех радиокнопок. Мне нужно, чтобы содержание на странице менялось при изменении выбора в группе радиокнопок. Изначально на странице должен отображаться первый DIV-блок, и должна быть выбрана первая радиокнопка (т.е. состояние "checked"). При выборе другой радиокнопки этот DIV-блок должен быть скрыт и показан блок, соответствующий выбранной радиокнопке.

$('#idregions').on('change', function() { 
  if ($(this).is(':checked')) { 
    $('#timeline').hide(); 
    $('#countries').hide(); 
    $('#regions').show(); 
  } 
}).trigger('change'); 
 
$('#idcountries').on('change', function() { 
  if ($(this).is(':checked')) { 
    $('#timeline').hide(); 
    $('#regions').hide(); 
    $('#countries').show(); 
  } 
}).trigger('change'); 
 
$('#idtimeline').on('change', function() { 
  if ($(this).is(':checked')) { 
    $('#countries').hide(); 
    $('#regions').hide(); 
    $('#timeline').show(); 
  } 
}).trigger('change'); 
 
$(function() { 
  $("#idregions").change(function() { 
    if (this.checked) { 
      $("#idcountries, #idtimeline").prop('checked', false); 
    } 
  }); 
}); 
 
$(function() { 
  $("#idcountries").change(function() { 
    if (this.checked) { 
      $("#idregions, #idtimeline").prop('checked', false); 
    } 
  }); 
}); 
 
$(function() { 
  $("#idtimeline").change(function() { 
    if (this.checked) { 
      $("#idcountries, #idregions").prop('checked', false); 
    } 
  }); 
});

<label><input type="radio" id="idregions" class="label09" name=rl  checked="checked"/>regions</label> 
<label><input type="radio" id="idcountries" class="label09" name=rl/>countries</label> 
<label><input type="radio" id="idtimeline" class="label09" name=rl/>trip</label> 
 
 
<div id="regions">1</div> 
<div id="countries">2</div> 
<div id="timeline">3</div> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Помогите разобраться, как это сделать.

Answer 1

Ниже сокращенный аналог вашего кода (потому что, зачем переключать радио через скрипт, если эта функция и так встроена в них).
В данном случае радиокнопки несут исключительно декоративный характер. Хотяя... их можно переключать через стрелки на клавиатуре, что тоже плюс.

$('.bubu').on('click', function(){ 
  $('.tab').hide(); 
	 
  var index = $('.bubu').index( $(this) );  
  // Находим номер элемента this, среди классов bubu. 
  // Т.к. кнопок и вкладок - одинаковое кол-во, по этому же номеру можно показать вкладку 
  $('.tab').eq(index).show(); 
});

.tab { 
  display: none; 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
 
<label class="bubu"><input type="radio" name="rl" checked>regions</label> 
<label class="bubu"><input type="radio" name="rl">countries</label> 
<label class="bubu"><input type="radio" name="rl">trip</label> 
 
<div class="tab" style="display: block;">1</div> 
<div class="tab">2</div> 
<div class="tab">3</div>

JavaScript переключаемые вкладки - табы (и немного CSS) - во втором пункте есть похожий пример.