Как заставить текстовые поля появляться, используя jQuery

Question

Я пытаюсь заставить соответствующую текстовую область появляться при нажатии Abnormal и исчезать при нажатии Normal. У меня проблема в том, что когда я нажимаю Abnormal для одного вопроса, он затрагивает обе текстовые области, а не тот, которому он соответствует.

$("[nfield='horizontal_field']").on("change", function() {
  $("[mrbvalue='Normal']").on('change', function() {
    if ($("[mrbvalue='Normal']:checked")) {
      $('[nfield="txt_fieldhori"]').show()
    }
  });

  $("[mrbvalue='Abnormal']").on('change', function() {
    if ($("[mrbvalue='Abnormal']:checked")) {
      $('[nfield="txt_fieldhori"]').hide()
    }
  });
})

$("[nfield='vert_field']").on('change', function() {
  $("[mrbvalue='Normal']").on('change', function() {
    if ($("[mrbvalue='Normal']:checked")) {
      $('[nfield="txt_nooo"]').show()
    }
  });
  
  $("[mrbvalue='Abnormal']").on('change', function() {
    if ($("[mrbvalue='Abnormal']:checked")) {
      $('[nfield="txt_nooo"]').hide()
    }
  })
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="n-mrb n-choice q" nfield="horizontal_field">
  <div class="mrb-item"><label><input type="radio" name="horizontal_field" mrbvalue="Normal" class="k-valid"> Normal</label></div>
  <div class="mrb-item"><label><input type="radio" name="horizontal_field" mrbvalue="Abnormal" class="k-valid"> Abnormal</label></div>
</div>
<textarea class="n-text comment -EntireLine ee k-valid" nfield="txt_fieldhori" id="tet"></textarea>
<div class="n-mrb n-choice q" nfield="vert_field">
  <div class="mrb-item"><label><input type="radio" name="vert_field" mrbvalue="Normal" class="k-valid"> Normal</label></div>
  <div class="mrb-item"><label><input type="radio" name="vert_field" mrbvalue="Abnormal" class="k-valid"> Abnormal</label></div>
</div>
<textarea class="n-text comment -EntireLine ee k-valid" nfield="txt_nooo" id="te"></textarea>

Answer 1

Проблема заключается в том, что вы выбираете все textarea экземпляры, когда происходит событие по радио, и вы также без необходимости вкладываете обработчики событий.

Чтобы исправить это, вы можете просто подключить один обработчик событий ко всем переключателям, который переключает видимость связанного textarea, который можно получить с помощью методов обхода DOM jQuery на основе выбранного ценность.

Также обратите внимание, что ваш HTML имеет много недопустимых нестандартных атрибутов. Их необходимо удалить или преобразовать в атрибуты данных, например: data-nfield="txt_fieldhori". В любом случае вам нужно убедиться, что вы добавили атрибут value к самим элементам радиовхода.

После всего сказанного попробуйте это:

$(":radio").on("change", function() {
  $(this).closest('.n-choice').next('textarea').toggle(this.value === 'Normal');
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="n-mrb n-choice q">
  <div class="mrb-item">
    <label>
      <input type="radio" name="horizontal_field" value="Normal" class="k-valid" checked="true"> 
      Normal
    </label>
  </div>
  <div class="mrb-item">
    <label>
      <input type="radio" name="horizontal_field" value="Abnormal" class="k-valid"> 
      Abnormal
    </label>
  </div>
</div>
<textarea class="n-text comment -EntireLine ee k-valid" id="tet"></textarea>
<div class="n-mrb n-choice q">
  <div class="mrb-item">
    <label>
      <input type="radio" name="vert_field" value="Normal" class="k-valid" checked="true"> 
      Normal
    </label>
  </div>
  <div class="mrb-item">
    <label>
      <input type="radio" name="vert_field" value="Abnormal" class="k-valid"> 
      Abnormal
    </label>
  </div>
</div>
<textarea class="n-text comment -EntireLine ee k-valid"  id="te"></textarea>

Answer 2

Вы слишком усложняете его и выбираете все соответствующие предметы вместо того, который вас интересует. Давайте найдем простое, правильное решение вместе с объяснением:

var textAreas = document.querySelectorAll("textarea.n-text.comment");
var radioButtons = document.querySelectorAll("input[type=radio]");
for (let index = 0; index < radioButtons.length; index++) {
    radioButtons[index].addEventListener("change", function() {
      textAreas[(index - (index % 2)) / 2].style.display = (index % 2) ? "none" : "block";
  });
}

Что происходит:

• загружаем все текстовые области в массивоподобный объект
• мы загрузить все переключатели в массивоподобный объект
• we l oop через набор переключателей, используя ключевое слово let, чтобы получить контекст блока для index
• we добавление события изменения для текущей радиокнопки
• (index - (index % 2)) / 2 дает правильную текстовую область index из радиокнопки index
• каждая пара радиокнопок должна скрывать текстовую область и каждый нечетное должно показать
• мы изменим display соответственно