Динамический выбор идентификатора в js / JQuery

Question

У меня есть форма html. Всякий раз, когда я нажимаю кнопку «Добавить», добавляется еще одна копия. Всякий раз, когда я нажимаю кнопку «Добавить», увеличивается идентификатор моих элементов, таких как имя_пользователя_0, имя_пользователя_1, имя_пользователя_2 ... В моей форме есть 2 переключателя, которые при каждом выборе второго переключателя появляется скрытая область текста. Проблема в том, что у меня проблема с выбором моих динамических c идентификаторов переключателей. Я сделал функцию, но она работает только для первого элемента, так как я не могу получить динамические c идентификаторы

    <label for="evetKontrol_0">Evet</label>
    <input type="radio" id="evetKontrol_0" name="uygun_0" onclick="javascript:yesnoCheck();" value="uygun" checked>
    <label for="hayirKontrol_0">Hayır</label>
    <input type="radio" id="hayirKontrol_0" name="uygun_0" onclick="javascript:yesnoCheck();" value="uygunDegil">
    <div id="ifNo_0" style="visibility:hidden">
        <strong>Uygun Olmama Sebebi:</strong> <input type="textarea" id="hayirSebep_0" name="hayirSebep" style="height: 75px"><br>
    </div>

    function yesnoCheck() {
      if (document.getElementById('evetKontrol_0').checked) {
          document.getElementById('ifNo_0').style.visibility = 'hidden';
      }
      else document.getElementById('ifNo_0').style.visibility = 'visible';


    }

Мне нужно иметь возможность получить evetKontrol_#somenumber для своей функции для каждого копия моей формы.

JSfiddle / весь мой код

Я пытался использовать jQuery( "[attribute*='value']" ), но мне не удалось его обработать.

Answer 1

Рассмотрим следующее.

Рабочий пример: https://jsfiddle.net/Twisty/sonvakq2/21/

JavaScript

$(function() {

  function addElement(tObj) {
    var counter = $("[id^='ogrenci']", tObj).length;
    var html = '<div class="col-auto" id="ogrenci_' + counter + '"><label for="ad">Ad</label><input type="text" name="ad[]" class="form-control" id="ad_' + counter + '" placeholder="Öğrencinin Adı"/><label for="soyad">Soyad</label><input type="text" name="soyad[]" class="form-control" id="soyad_' + counter + '" placeholder="Öğrencinin Soyadı"/><label for="no">No</label><input type="text" name="numara[]" class="form-control" id="no_' + counter + '" placeholder="Öğrencinin Numarası"><label for="course">Bölümü</label><input type="text" name="bolum[]" class="form-control" id="course_' + counter + '" placeholder="Öğrencinin Bölümü"><label for="alKredi">Almak İstediği Kredi</label><input type="text" name="alKredi[]" class="form-control" id="alKredi_' + counter + '" placeholder="Almak İstediği Kredi"><label for="verKredi">Alabileceği Kredi</label><input type="text" name="verKredi[]" class="form-control" id="verKredi_' + counter + '" placeholder="Alabileceği Kredi"><label for=""><strong>Uygun mu?</strong> </label><br><label for="evetKontrol_' + counter + '">Evet</label><input type="radio" id="evetKontrol_' + counter + '" name="uygun_' + counter + '" value="uygun" checked><label for="hayirKontrol_' + counter + '">Hayır</label><input type="radio" id="hayirKontrol_' + counter + '" name="uygun_' + counter + '" value="uygunDegil"><div id="ifNo_' + counter + '" style="visibility:hidden"><strong>Uygun Olmama Sebebi:</strong> <input type="textarea" id="hayirSebep_' + counter + '" name="hayirSebep" style="height: 75px"><br></div><div class="input-group-addon"><a href="#" id="remove_' + counter + '" class="btn btn-danger remove"><span class="glyphicon glyphicon glyphicon-remove" aria-hidden="true"></span> Remove</a></div></div>';
    tObj.append(html);
  }

  function showHidden() {
    $("[id^='evetKontrol']").each(function(i, el) {
      var rel = $("#ifNo_" + i);
      if ($(el).is(":checked")) {
        rel.show();
      } else {
        rel.hide();
      }
    });
  }

  //add more fields group
  $("#add").click(function() {
    addElement($("#container"));
  });

  //remove fields group
  $('#container').on('click', "a[id^='remove']", function() {
    $(this).parents('div.col-auto').remove();
  });

  $("#container").on("click", "input[type='radio']", showHidden);
});

Ваш Скрипка не была настроена должным образом, поэтому я обратился к этому в первую очередь. Я переместил много повторяющихся элементов в функции. Переключил все это jQuery и удалил все локальные вызовы javascript.

Вы можете увидеть примеры использования относительного селектора атрибутов для выбора нужных элементов.

Смотрите больше: https://api.jquery.com/category/selectors/attribute-selectors/

Answer 2

Чтобы получить evetKontrol_#somenumber, передайте это число в функцию onclick.

В вашем JSfiddle это будет означать объединение переменной counter в параметры функции, такие как

... onclick="javascript:yesnoCheck(' + counter + ');" ...

Затем обновите функцию, чтобы использовать это значение:

function yesnoCheck(counter) {
  if (document.getElementById('evetKontrol_' + counter).checked) {
    document.getElementById('ifNo_' + counter).style.visibility = 'hidden';
  } else {
    document.getElementById('ifNo_' + counter).style.visibility = 'visible';
  }

Answer 3

Вам не нужно использовать идентификаторы для этого. Просто запишите событие onclick и передайте логическое значение, чтобы определить, следует ли показывать скрытый ввод. Если у вас есть несколько входов для отдельного отображения и скрытия, вы можете передать идентификатор входа вместе с логическим значением.

function yesnoCheck(show) {
  var ta = document.getElementById('hiddenTA');
  if (show) {
    ta.style.visibility = 'visible';
  } else {
    ta.style.visibility = 'hidden';
  }
}

<label for="user1_0">User 1</label>
<input type="radio" name="users" id="user1_0" onclick="yesnoCheck(false)" checked />
<label for="user2_0">User 2</label>
<input type="radio" name="users" id="user2_0" onclick="yesnoCheck(true)" />

<input style="visibility:hidden" id="hiddenTA" />