Как отследить выбранное значение radio в js?

Question

[iwebdesign]

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

В чем проблема? Сам не могу понять. Прошу помощи)

<div id="nav-radio"> 
<input name="radio-display" type="radio" value="1" checked> Показать 1
<input name="radio-display" type="radio" value="2"> Показать 2
<input name="radio-display" type="radio" value="3"> Показать 3
</div> 

<div id="block1">Блок 1</div> 
<div id="block2">Блок 2</div> 
<div id="block3">Блок 3</div> 

<script>
$("#nav-radio").on("change", "input[type=radio]", function(){
value_nav = '';
$('#nav-radio input[type=radio]').each(function() { value_nav = $('input[type=radio]:checked').val(); });
if (value_nav == '1') 
{
$('#block1').css('display', 'block');
$('#block2').css('display', 'none');
$('#block3').css('display', 'none');
} 
else if (value_nav == '2') 
{
$('#block1').css('display', 'none');
$('#block2').css('display', 'block');
$('#block3').css('display', 'none');
}
else if (value_nav == '3') 
{
$('#block1').css('display', 'none');
$('#block2').css('display', 'none');
$('#block3').css('display', 'block');
}
else 
{
//
}
});
</script>

Answer 1

[Игорь]

https://codepen.io/igor307/pen/MWWNWZX
Вот так это можно решить

Comments

[iwebdesign]

Спасибо! Работает

[iwebdesign]

Не подскажите как изменить код, чтобы не прописывать условия два раза?

$(".block-container > div").hide();
  $(".block-container > #block" + id + "").show();

[Дмитрий Карпов]

iwebdesign, Вынести функцию

// при загрузке
inputChange();
//при изменении
$("#nav-radio").on("change", "input[type=radio]", inputChange);
  
function inputChange() {
  let id = $("#nav-radio input:checked").val();
  $('.block-container > div').hide();
  $('.block-container > #block'+id+'').show();
}

[iwebdesign]

Дмитрий Карпов, спасибо большое! Работает)

Answer 2

[Дмитрий Карпов]

Потому что у вас стоит событие "change", вызовите это событие при загрузке.

Comments

[iwebdesign]

Спасибо, только я не разбираюсь в js. Можете тыкнуть куда смотреть?

[iwebdesign]

Так?

$(document).ready(function(){
$("#nav-radio").on("change", "input[type=radio]", function(){ ....

[Дмитрий Карпов]

iwebdesign, попробуйте функцию . trigger()
$( "#nav-radio" ).trigger( "change" );