Выберите контейнер при выборе дочерних радиокнопок, за исключением ссылки внутри div, когда не выбран

Question

Я пытаюсь выбрать родительский div и установить для него соответствующий дочерний переключатель.

Внутри этого родительского div есть ссылка на отображение / скрытие, которая показывает некоторую информацию в div, который также внутри этого контейнера.

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

Ищу чистое ванильное javascript решение.

В моем коде до сих пор неправильно выбирается родительский div радиокнопки, а затем я хочу убедиться, что показать / скрыть ссылка не выбирает div, если он еще не выбран.

HTML

<div class="box" onclick="check(this)">
  <h3>This is div 1</h3>
  <input id="radio1" name="field" type="radio" />
  <div>
  <div class="hiddenstuff">
    You see me now
  </div>
  <p><a href="#" class="link" onclick="showhide(this)">show</a></p>
  </div>

</div>
<br />
<div class="box" onclick="check(this)">
  <h3>This is div 2</h3>
  <input id="radio2" name="field" type="radio" />
  <div>
  <div class="hiddenstuff">
    You see me now
  </div>
  <p><a href="#" class="link" onclick="showhide(this)">show</a></p>
  </div>

</div>

CSS:

.box {
  width: 300px;
  height: 150px;
  padding: 10px;
  background-color: yellow;
  cursor: pointer;
}
.checked {
  border: 3px solid blue;
}

.hiddenstuff {
  color: red;
  padding: 10px;
  display: none;
}

JS:

function check(box) {
  var radioId = this.querySelectorAll('input[type="radio"]').value;
    document.getElementById(radioId).click();
  document.querySelectorAll(".box").forEach(function (item) {
    item.classList.remove("checked");
  });
  if ((input[0].checked = true)) {
    box.classList.add("checked");
  }
  return false;
}

function showhide(elem) {
  var cont = elem.parentNode.previousElementSibling;
  if (cont.style.display != "block") {
    cont.style.display = "block";
    elem.innerHTML = "hide";
  } else {
    cont.style.display = "none";
    elem.innerHTML = "show";
  }
  return false;
  elem.stopPropagation();
}

.box {
  width: 300px;
  height: 150px;
  padding: 10px;
  background-color: yellow;
  cursor: pointer;
}
.checked {
  border: 3px solid blue;
}

.hiddenstuff {
  color: red;
  padding: 10px;
  display: none;
}

<div class="box" onclick="check(this)">
  <h3>This is div 1</h3>
  <input id="radio1" name="field" type="radio" />
  <div>
  <div class="hiddenstuff">
    You see me now
  </div>
  <p><a href="#" class="link" onclick="showhide(this)">show</a></p>
  </div>

</div>
<br />
<div class="box" onclick="check(this)">
  <h3>This is div 2</h3>
  <input id="radio2" name="field" type="radio" />
  <div>
  <div class="hiddenstuff">
    You see me now
  </div>
  <p><a href="#" class="link" onclick="showhide(this)">show</a></p>
  </div>

</div>

Answer 1

Это то, что вам нужно?

Если да, добавьте event.stopPropagation(); в начале вашей функции ссылки.

Также я считаю, что получение вашего идентификатора было неправильным, поэтому я изменил его:

querySelectorAll возвращает список узлов, а не элемент. Затем вам нужно ввести l oop и получить .id not .value, чтобы получить идентификатор.

var el = box.querySelectorAll('input[type="radio"]');
      var radioId = "";
      el.forEach(element => {
        radioId = element.id
      });

Используйте box, а не this. Также input[0] был undefined, в моем решении у вас есть el, используйте это в своем условии if.

function check(box) {
  var el = box.querySelectorAll('input[type="radio"]');
  var radioId = "";
  el.forEach(element => {
    radioId = element.id
  });

  //console.log(radioId);
  document.getElementById(radioId).click();
  document.querySelectorAll(".box").forEach(function(item) {
    item.classList.remove("checked");
  });
  if ((el[0].checked = true)) {
    box.classList.add("checked");
  }
  return false;
}

function showhide(elem) {
event.stopPropagation();
  var cont = elem.parentNode.previousElementSibling;

  if (cont.style.display != "block") {
    cont.style.display = "block";
    elem.innerHTML = "hide";
  } else {
    cont.style.display = "none";
    elem.innerHTML = "show";
  }
  return false;
  
}

.box {
  width: 300px;
  height: 150px;
  padding: 10px;
  background-color: yellow;
  cursor: pointer;
}

.checked {
  border: 3px solid blue;
}

.hiddenstuff {
  color: red;
  padding: 10px;
  display: none;
}

<div class="box" onclick="check(this)">
  <h3>This is div 1</h3>
  <input id="radio1" name="field" type="radio" />
  <div>
    <div class="hiddenstuff">
      You see me now
    </div>
    <p><a href="#" class="link" onclick="showhide(this)">show</a></p>
  </div>

</div>
<br />
<div class="box" onclick="check(this)">
  <h3>This is div 2</h3>
  <input id="radio2" name="field" type="radio" />
  <div>
    <div class="hiddenstuff">
      You see me now
    </div>
    <p><a href="#" class="link" onclick="showhide(this);">show</a></p>
  </div>

</div>