Вывод нескольких блоков с по отмеченному Radio

Question

Как вывести несколько блоков при выборе одного radio? Например сами инпуты лежат где ни будь посередине страницы, а при выборе одного из них должен появится контент вверху страницы и снизу, одновременно в двух местах. Пытался сделать вот так, но показывает почему то только первые блоки, а хочется например блок 1 и 4 или 2 и 3:

<div class="block-text" id="block-1">
    Блок текста №1
</div>

<div class="block-text" id="block-2">
    Блок текста №2
</div>

<p class="text-center">
    <label><input type="radio" name="radio" value="1"> Radio Button 1</label><br>
    <label><input type="radio" name="radio" value="2"> Radio Button 2</label>
</p>


<div class="block-text2" id="block-2">
    Блок текста №3
</div>

<div class="block-text2" id="block-1">
    Блок текста №4
</div>
  


<style>
  .block-text {
    display: none;
    padding: 15px;
    border: 3px solid #ec4848;
}

.block-text2 {
    display: none;
    padding: 15px;
    border: 3px solid #ec4848;
}
</style>
<script src="https://snipp.ru/cdn/jquery/2.1.1/jquery.min.js"></script>
<script>
  $('input[name="radio"]').click(function(){
      var target = $('#block-' + $(this).val());

      $('.block-text').not(target).hide(0);
      target.fadeIn(500);

  });
  
  $('input[name="radio"]').click(function(){
    var target = $('#block-' + $(this).val());

    $('.block-text2').not(target).hide(0);
    target.fadeIn(500);
   
});
</script>

Или может я вообще не тем путем пошел? Тогда каким?

Answer 1

Если задать всем блокам единый класс и указать какой-нибудь аттрибут у инпутов (в моём случае - это data-for), то можно написать очень простой код:

$('input[name="radio"]').click(function() {
  $('.block-text').hide();

  $(this).data('for').split(' ').forEach(blockId => {
    $(`#${blockId}`).fadeIn(500);
  });
});

.block-text {
  display: none;
  padding: 15px;
  border: 3px solid #ec4848;
}

.block-text2 {
  display: none;
  padding: 15px;
  border: 3px solid #ec4848;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.1/jquery.min.js"></script>
<div class="block-text" id="block-1">
  Блок текста №1
</div>

<div class="block-text" id="block-2">
  Блок текста №2
</div>

<p class="text-center">
  <label><input type="radio" name="radio" value="1" data-for="block-1 block-4"> Radio Button 1</label><br>
  <label><input type="radio" name="radio" value="2" data-for="block-2 block-3"> Radio Button 2</label>
</p>


<div class="block-text" id="block-3">
  Блок текста №3
</div>

<div class="block-text" id="block-4">
  Блок текста №4
</div>

БЛОГ НА HUSL

Вывод нескольких блоков с по отмеченному Radio

Ответы (1 шт):