JQuery单选按钮分层元素隐藏

Question

我正在尝试根据选择使用/调整现有脚本来显示/隐藏一系列分层的单选按钮。请看下面的代码。问题是当为第三级单选按钮进行选择时，第二级单选按钮消失。罪魁祸首似乎是， $(".opthide").not(targetBox).hide();但我不确定如何限制隐藏到相关元素。

$(document).ready(function() {
  $('input[name="insv_sts5"]').click(function() {
    var inputValue = $(this).attr("value");
    var targetBox = $("." + inputValue);
    $(".opthide").not(targetBox).hide();
    $(targetBox).show();
  });
});

$(document).ready(function() {
  $('input[name="insv_sts6"]').click(function() {
    var inputValue = $(this).attr("value");
    var targetBox = $("." + inputValue);
    $(".opthide").not(targetBox).hide();
    $(targetBox).show();
  });
});

$(document).ready(function() {
  $('input[name="insv_sts9"]').click(function() {
    var inputValue = $(this).attr("value");
    var targetBox = $("." + inputValue);
    $(".opthide").not(targetBox).hide();
    $(targetBox).show();
  });
});

.opthide {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="form1" name="form1" method="post">
  <table cellpadding="5" cellspacing="5">
    <tr>
      <th scope="col">Level</th>
      <th scope="col">Question</th>
      <th scope="col">Answer</th>
    </tr>
    <tr>
      <td>1</td>
      <td>Indicate what kind of pet you have: </td>
      <td>
        <label>
          <input type="radio" name="insv_sts5" value="6" id="insv_sts_15"> Dog
        </label>
        <label>
          <input type="radio" name="insv_sts5" value="9" id="insv_sts_15"> Cat
        </label>
        <br />
      </td>
    </tr>
    <tr class="6 opthide">
      <td>2a</td>
      <td>Is your dog a beagle? </td>
      <td>
        <label>
          <input type="radio" name="insv_sts6" value="7" id="insv_sts_16"> Yes
        </label>
        <label>
          <input type="radio" name="insv_sts6" value="8" id="insv_sts_16"> No
        </label>
        <br />
      </td>
    </tr>
    <tr class="7 opthide">
      <td>3a</td>
      <td>Is your beagle AKC Registered?</td>
      <td>
        <label>
          <input type="radio" name="insv_sts7" value="1" id="insv_sts_17"> Yes
        </label>
        <label>
          <input type="radio" name="insv_sts7" value="0" id="insv_sts_07"> No
        </label>
      </td>
    </tr>
    <tr class="8 opthide">
      <td>3b</td>
      <td>Is your dog a German Shepherd?</td>
      <td>
        <label>
          <input type="radio" name="insv_sts8" value="1" id="insv_sts_18"> Yes
        </label>
        <label>
          <input type="radio" name="insv_sts8" value="0" id="insv_sts_08"> No
        </label>
      </td>
    </tr>
    <tr class="9 opthide">
      <td>2b</td>
      <td>Is your cat a Siamese? </td>
      <td>
        <label>
          <input type="radio" name="insv_sts9" value="10" id="insv_sts_19"> Yes
        </label>
        <label>
          <input type="radio" name="insv_sts9" value="11" id="insv_sts_19"> No
        </label>
      </td>
    </tr>
    <tr class="10 opthide">
      <td>3c</td>
      <td>Is your Siamese a blue seal? </td>
      <td>
        <label>
          <input type="radio" name="insv_sts10" value="1" id="insv_sts_110"> Yes
        </label>
        <label>
          <input type="radio" name="insv_sts10" value="0" id="insv_sts_010"> No
        </label>
      </td>
    </tr>
    <tr class="11 opthide">
      <td>3d</td>
      <td>Is your cat a Persian?</td>
      <td>
        <label>
          <input type="radio" name="insv_sts11" value="1" id="insv_sts_111"> Yes
        </label>
        <label>
          <input type="radio" name="insv_sts11" value="0" id="insv_sts_011"> No
        </label>
      </td>
    </tr>
  </table>
</form>

Answer 1

欢迎来到 SO，

这是我的 2 美分。 我在点击时循环遍历所有单选按钮，如果选中该按钮则显示目标元素，如果不是，则清除对较低级别按钮的检查并隐藏元素，这是防止元素显示所必需的，即使是用户改变主意并更改一些顶级复选框。

希望对您有所帮助，如果您有任何问题或任何人有不同的方法，请告诉我。

决赛看起来像这样。

$(document).ready(function() {
  $('input[type="radio"]').click(function() {   
    $('input[type="radio"]').each(function () {
      //iterate through all radio buttons
      var $target = $(this).val()  //get target class from value     
      if ($(this).prop('checked')) {  //check if radio box is checked             
        $('.' + $target).show()  //show target tr
      } else {
        //hide target tr and uncheck all radio buttons in child element
        $('.' + $target).hide().find('input[type="radio"]').prop('checked', false);        
      }      
    })    
  });
});

.opthide {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="form1" name="form1" method="post">
  <table cellpadding="5" cellspacing="5">
    <tr>
      <th scope="col">Level</th>
      <th scope="col">Question</th>
      <th scope="col">Answer</th>
    </tr>
    <tr>
      <td>1</td>
      <td>Indicate what kind of pet you have: </td>
      <td>
        <label>
          <input type="radio" name="insv_sts5" value="6" id="insv_sts_15"> Dog
        </label>
        <label>
          <input type="radio" name="insv_sts5" value="9" id="insv_sts_15"> Cat
        </label>
        <br />
      </td>
    </tr>
    <tr class="6 opthide">
      <td>2a</td>
      <td>Is your dog a beagle? </td>
      <td>
        <label>
          <input type="radio" name="insv_sts6" value="7" id="insv_sts_16"> Yes
        </label>
        <label>
          <input type="radio" name="insv_sts6" value="8" id="insv_sts_16"> No
        </label>
        <br />
      </td>
    </tr>
    <tr class="7 opthide">
      <td>3a</td>
      <td>Is your beagle AKC Registered?</td>
      <td>
        <label>
          <input type="radio" name="insv_sts7" value="1" id="insv_sts_17"> Yes
        </label>
        <label>
          <input type="radio" name="insv_sts7" value="0" id="insv_sts_07"> No
        </label>
      </td>
    </tr>
    <tr class="8 opthide">
      <td>3b</td>
      <td>Is your dog a German Shepherd?</td>
      <td>
        <label>
          <input type="radio" name="insv_sts8" value="1" id="insv_sts_18"> Yes
        </label>
        <label>
          <input type="radio" name="insv_sts8" value="0" id="insv_sts_08"> No
        </label>
      </td>
    </tr>
    <tr class="9 opthide">
      <td>2b</td>
      <td>Is your cat a Siamese? </td>
      <td>
        <label>
          <input type="radio" name="insv_sts9" value="10" id="insv_sts_19"> Yes
        </label>
        <label>
          <input type="radio" name="insv_sts9" value="11" id="insv_sts_19"> No
        </label>
      </td>
    </tr>
    <tr class="10 opthide">
      <td>3c</td>
      <td>Is your Siamese a blue seal? </td>
      <td>
        <label>
          <input type="radio" name="insv_sts10" value="1" id="insv_sts_110"> Yes
        </label>
        <label>
          <input type="radio" name="insv_sts10" value="0" id="insv_sts_010"> No
        </label>
      </td>
    </tr>
    <tr class="11 opthide">
      <td>3d</td>
      <td>Is your cat a Persian?</td>
      <td>
        <label>
          <input type="radio" name="insv_sts11" value="1" id="insv_sts_111"> Yes
        </label>
        <label>
          <input type="radio" name="insv_sts11" value="0" id="insv_sts_011"> No
        </label>
      </td>
    </tr>
  </table>
</form>