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>