JQuery Optionsfeld hierarchisches Element ausblenden

Question

Ich versuche, ein vorhandenes Skript zu verwenden/anzupassen, um eine hierarchische Reihe von Optionsfeldern anzuzeigen/auszublenden, basierend auf der Auswahl. Bitte beachten Sie den folgenden Code. Das Problem ist, dass die Optionsschaltfläche der 2. Ebene ausgeblendet wird, wenn eine Auswahl für die Optionsschaltfläche der 3. Ebene getroffen wird. Es scheint, dass der Schuldige $ (". Opthide") ist. Nicht (targetBox) .hide(); aber ich bin mir nicht sicher, wie man das Verstecken auf verbundene Elemente beschränkt.

$(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

willkommen zu SO,

Hier sind meine 2 Cent. Ich machte Schleife durch alle Radio-Schaltflächen auf klicken und entsprechend reagieren, wenn die Schaltfläche aktiviert ist, zeigt es Zielelement, wenn es nicht überprüft, überprüft die unteren Ebenen Tasten und ausblenden das Element, das ist erforderlich, um Elemente zu verhindern, selbst wenn Ein Benutzer ändert seine Meinung und ändert ein Kontrollkästchen auf oberster Ebene.

Hoffe es hilft, wenn Sie irgendwelche Fragen haben oder jemand andere Ansatz haben würde, lassen Sie es mich wissen.

Endgültig würde so aussehen.

$(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>