基本上，我正在关注我的这篇文章，如果我必须显示单选按钮以及其中的 和 显示 div，则以下解决方案可以正常工作：
1
1236$(".tier1-options :radio").on("change", function (e) {
//remove shown class from all tier2 options and clear values from all form elements inside it
$('.tier2-options')
.removeClass('shown')
.find('input, select').val('')
//show the related tier2 options
$(this)
.parents('.tier1-options')
.find('.tier2-options')
.addClass('shown')
});
.tier2-options {
display: none;
margin-left: 1rem;
padding: 1rem;
background-color: #EEE;
}
.shown{
display: block;
}
Select one of the checkboxes:
但是当我尝试添加多个单选按钮时，此代码不适用于移动内容选项。基本上，当我点击Tier I Move或Tier II Move
subtier2-options不会显示
$(".tier1-options :radio").on("change", function (e) {
//remove shown class from all tier2 options and clear values from all form elements inside it
$('.tier2-options')
.removeClass('shown')
.find('input, select').val('')
//show the related tier2 options
$(this)
.parents('.tier1-options')
.find('.tier2-options')
.addClass('shown')
});
$(".subtier1-options :radio").on("change", function (e) {
//remove shown class from all tier2 options and clear values from all form elements inside it
$('.subtier2-options')
.removeClass('shown')
.find('input, select').val('')
//show the related tier2 options
$(this)
.parents('.subtier1-options')
.find('.subtier2-options')
.addClass('shown')
});
.tier2-options {
display: none;
margin-left: 1rem;
padding: 1rem;
background-color: #EEE;
}
.shown{
display: block;
}
.subtier2-options {
display: none;
margin-left: 1rem;
padding: 1rem;
background-color: #EEE;
}
Select one of the checkboxes:
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
收藏
当您在 css 文件中使用类时，这些类将按照它们的写入顺序应用。由于
shown类位于subtier2-options类之上，因此它首先被应用。因此，当应用subtier2-options时，显示设置为block，然后更改为none。您只需更改 css 中类的顺序，如下所示，然后它就可以工作。
$(".tier1-options :radio").on("change", function (e) { //remove shown class from all tier2 options and clear values from all form elements inside it $('.tier2-options') .removeClass('shown') .find('input, select').val('') //show the related tier2 options $(this) .parents('.tier1-options') .find('.tier2-options') .addClass('shown') }); $(".subtier1-options :radio").on("change", function (e) { //remove shown class from all tier2 options and clear values from all form elements inside it $('.subtier2-options') .removeClass('shown') .find('input, select').val('') //show the related tier2 options $(this) .parents('.subtier1-options') .find('.subtier2-options') .addClass('shown') });.tier2-options { display: none; margin-left: 1rem; padding: 1rem; background-color: #EEE; } .subtier2-options { display: none; margin-left: 1rem; padding: 1rem; background-color: #EEE; } .shown{ display: block; }<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <h5>Select one of the checkboxes:</h5> <div class='tier1-options'> <label> <input name="useroption" type="radio" value="changeLocation"> Change Location </label> <div class="tier2-options"> <select name="availableMarkAsFullLocations"> <option value="-">--Please Select--</option> <option value="3">BOX#3</option> <option value="6">FREEZER#1</option> <option value="8">FREEZER#2</option> <option value="19">BOX#9</option> <option value="20">QBUILDING</option> </select> </div> </div> <div class="tier1-options"> <label> <input name="useroption" type="radio" value="updateLocation"> Update Location </label> <div class="tier2-options"> <select name="availableUpdateLocations"> <option value="-">--Please Select--</option> <option value="3">BOX#3</option> <option value="6">FREEZER#1</option> <option value="8">FREEZER#2</option> <option value="19">BOX#9</option> </select> </div> </div> <div class="tier1-options"> <label> <input name="useroption" type="radio" value="retireLocation"> Retire </label> <div class="tier2-options"> <select name="availableRetireLocations"> <option value="-">--Please Select--</option> <option value="3">BOX#3</option> <option value="6">FREEZER#1</option> <option value="8">FREEZER#2</option> <option value="19">BOX#9</option> <option value="20">QBUILDING</option> </select> </div> </div> <div class='tier1-options'> <label> <input name="useroption" type="radio" value="moveContents"> Move Contents </label> <div class="tier2-options"> <div class='subtier1-options'> <label> <input name="useroption" type="radio" value="moveContentsTierI"> Tier I move </label> <div class="subtier2-options"> <select name="availableTierILocations"> <option value="-">--Please Select--</option> <option value="3">BOX#3</option> <option value="6">FREEZER#1</option> <option value="8">FREEZER#2</option> <option value="19">BOX#9</option> <option value="20">QBUILDING</option> </select> </div> </div> <!--end of <div class='subtier1-options'> --> <div class='subtier1-options'> <label> <input name="useroption" type="radio" value="moveContentsTierII"> Tier II move </label> <div class="subtier2-options"> <select name="availableTierIILocations"> <option value="-">--Please Select--</option> <option value="3">BOX#3</option> <option value="6">FREEZER#1</option> <option value="8">FREEZER#2</option> <option value="19">BOX#9</option> <option value="20">QBUILDING</option> </select> </div> </div> <!--end of <div class='subtier1-options'> --> </div> </div>