仅应使用Javascript单选按钮，其中包含具有相同班级的子级

Question

我已经被这种逻辑锁定了2周，我只需要在包含“ linha-opcao-resposta”课程的“ div”中有其他同班的孩子就可以了。

换句话说。 我需要显示“ div”输入父级的子级，该子级包含被选中时具有相同父类的“ div”子级，并从单选按钮组中隐藏其他子级

看下面的例子。

<div style="padding-left:30px;clear:both;" class="linha-opcao-resposta">
  <div style="float:left;">
    <label for="7329_2338" title="">27.3 Presença de agentes específicos na citologia oncótica?</label>
    <input type="hidden" title="" id="7329_2338" name="hidden_2338">

  </div>
  <div style="padding-left:30px;clear:both;" class="linha-opcao-resposta">
    <div style="float:left;">
      <input type="radio" title="" id="7330_2370" name="radio_2370" indicador="CHECKUP_AGEESPCITONC" value="0">
      <label for="7330_2370" title="">Não</label>

    </div>
  </div>
  <div style="padding-left:30px;clear:both;" class="linha-opcao-resposta">
    <div style="float:left;">
      <input type="radio" title="" id="7331_2370" name="radio_2370" indicador="CHECKUP_AGEESPCITONC" value="1">
      <label for="7331_2370" title="">Sim </label>

    </div>
    <div style="padding-left: 30px; clear: both; " class="linha-opcao-resposta">
      <div style="float:left;">
        <label for="7331_2371" title="">27.3.1 Agente 1</label>
        <input type="text" title="" id="7331_2371" name="text_2371" indicador="CHECKUP_AGEESPCITONC_AGENTE_1" class="rfdRoundedCorners rfdDecorated rfdInputDisabled">

      </div>
    </div>
    <div style="padding-left: 30px; clear: both; " class="linha-opcao-resposta">
      <div style="float:left;">
        <label for="7332_2371" title="">27.3.2 Agente 2</label>
        <input type="text" title="" id="7332_2371" name="text_2371" indicador="CHECKUP_AGEESPCITONC_AGENTE_2" class="rfdRoundedCorners rfdDecorated rfdInputDisabled">

      </div>
    </div>
    <div style="padding-left: 30px; clear: both; " class="linha-opcao-resposta">
      <div style="float:left;">
        <label for="7333_2371" title="">27.3.3 Agente 3</label>
        <input type="text" title="" id="7333_2371" name="text_2371" indicador="CHECKUP_AGEESPCITONC_AGENTE_3" class="rfdRoundedCorners rfdDecorated rfdInputDisabled">

      </div>
    </div>
  </div>
  <div style="padding-left:30px;clear:both;" class="linha-opcao-resposta">
    <div style="float:left;">
      <input type="radio" title="" id="7334_2370" name="radio_2370" indicador="CHECKUP_AGEESPCITONC" value="2">
      <label for="7334_2370" title="">Exame não realizado</label>

    </div>
  </div>
  <div style="padding-left:30px;clear:both;" class="linha-opcao-resposta">
    <div style="float:left;">
      <input type="radio" title="" id="7405_2370" name="radio_2370" indicador="CHECKUP_AGEESPCITONC" value="3">
      <label for="7405_2370" title="">Não se aplica</label>

    </div>
  </div>
</div>

仅应显示包含具有“ linha-opcao-resposta”类别的子级的单选按钮，其他不包含这些子级的单选按钮，则应使包含子类的单选按钮消失。

我试图这样做，但没有成功。

$('input[type="radio"]').on('change', function () {
    var element = $(this);
    var pais = element.parent().parent();
    var filhos;
    var aux = 0;
    pais.forEach(pai => {
        if (element.val() == aux) {
            filhos = pai.children();
            if (filhos.length > 1) {
                for (var j = 0; j < filhos.length; j++) {
                    filhos[j].style.display = "block";
                }
            }
        }
        else {
            filhos = pai.children();
            for (var k = 0; k < filhos.length; j++) {
                filhos[k].style.display = "none";
            }
        }
        aux++;
    });

Answer 1

首先将display = 'none'设置为所有单选按钮的父级。然后，仅对符合条件的单选按钮的父母设置display = 'block'。请尝试以下方式：

var radio = document.querySelectorAll('input[type=radio]');
radio.forEach(function(radEl){
  radEl.parentElement.style.display = 'none';
});

var radShow = document.querySelectorAll('div.linha-opcao-resposta + div.linha-opcao-resposta > div > input[type=radio]');
radShow.forEach(function(radEl){
  radEl.parentElement.style.display = 'block';
});

<div style="padding-left:30px;clear:both;" class="linha-opcao-resposta">
  <div style="float:left;">
      <label for="7329_2338" title="">27.3 Presença de agentes específicos na citologia oncótica?</label>
      <input type="hidden" title="" id="7329_2338" name="hidden_2338">

  </div>
  <div style="padding-left:30px;clear:both;" class="linha-opcao-resposta">
      <div style="float:left;">
          <input type="radio" title="" id="7330_2370" name="radio_2370" indicador="CHECKUP_AGEESPCITONC" value="0">
          <label for="7330_2370" title="">Não</label>

      </div>
  </div>
  <div style="padding-left:30px;clear:both;" class="linha-opcao-resposta">
      <div style="float:left;">
          <input type="radio" title="" id="7331_2370" name="radio_2370" indicador="CHECKUP_AGEESPCITONC" value="1">
          <label for="7331_2370" title="">Sim </label>

      </div>
      <div style="padding-left: 30px; clear: both; " class="linha-opcao-resposta">
          <div style="float:left;">
              <label for="7331_2371" title="">27.3.1 Agente 1</label>
              <input type="text" title="" id="7331_2371" name="text_2371" indicador="CHECKUP_AGEESPCITONC_AGENTE_1" class="rfdRoundedCorners rfdDecorated rfdInputDisabled">

          </div>
      </div>
      <div style="padding-left: 30px; clear: both; " class="linha-opcao-resposta">
          <div style="float:left;">
              <label for="7332_2371" title="">27.3.2 Agente 2</label>
              <input type="text" title="" id="7332_2371" name="text_2371" indicador="CHECKUP_AGEESPCITONC_AGENTE_2" class="rfdRoundedCorners rfdDecorated rfdInputDisabled">

          </div>
      </div>
      <div style="padding-left: 30px; clear: both; " class="linha-opcao-resposta">
          <div style="float:left;">
              <label for="7333_2371" title="">27.3.3 Agente 3</label>
              <input type="text" title="" id="7333_2371" name="text_2371" indicador="CHECKUP_AGEESPCITONC_AGENTE_3" class="rfdRoundedCorners rfdDecorated rfdInputDisabled">

          </div>
      </div>
  </div>
  <div style="padding-left:30px;clear:both;" class="linha-opcao-resposta">
      <div style="float:left;">
          <input type="radio" title="" id="7334_2370" name="radio_2370" indicador="CHECKUP_AGEESPCITONC" value="2">
          <label for="7334_2370" title="">Exame não realizado</label>

      </div>
  </div>
  <div style="padding-left:30px;clear:both;" class="linha-opcao-resposta">
      <div style="float:left;">
          <input type="radio" title="" id="7405_2370" name="radio_2370" indicador="CHECKUP_AGEESPCITONC" value="3">
          <label for="7405_2370" title="">Não se aplica</label>

      </div>
  </div>
</div>