英文:
Trying to put radio buttons inside a radio button
问题
以下是您提供的代码的翻译部分：
$(".tier1-options :radio").on("change", function (e) {
// 从所有tier2选项中删除已显示的类并清除其中所有表单元素的值
$('.tier2-options')
.removeClass('shown')
.find('input, select').val('')
// 显示相关的tier2选项
$(this)
.parents('.tier1-options')
.find('.tier2-options')
.addClass('shown')
});
$(".subtier1-options :radio").on("change", function (e) {
// 从所有subtier2选项中删除已显示的类并清除其中所有表单元素的值
$('.subtier2-options')
.removeClass('shown')
.find('input, select').val('')
// 显示相关的subtier2选项
$(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;
}
这是您提供的JavaScript和CSS代码的翻译部分。希望这对您有所帮助。如果您需要更多的翻译，请告诉我。
英文:
Basically, I'm following this post of mine and the following solution works fine if I have to display radio buttons and the and display divs inside it :
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
$(".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')
});
<!-- language: lang-css -->
.tier2-options {
display: none;
margin-left: 1rem;
padding: 1rem;
background-color: #EEE;
}
.shown{
display: block;
}
<!-- language: lang-html -->
<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>
<!-- end snippet -->
But when I'm trying to add multiple radio buttons, this code isn't working for Move Contents option. Basicaly the subtier2-options won't show up when I click on Tier I Move or Tier II Move
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
$(".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')
});
<!-- language: lang-css -->
.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;
}
<!-- language: lang-html -->
<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>
<!-- end snippet -->
答案1
得分: 0
在CSS文件中使用类时，类的应用顺序与它们的书写顺序一致。因此，shown类位于subtier2-options类之上，它会首先被应用。所以，当应用subtier2-options类时，显示被设置为block，然后再更改为none。
您只需要在CSS中更改类的顺序，如下所示，然后它就可以正常工作。
.shown{
display: block;
}
.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类在tier2-options和subtier2-options类之前被应用。
英文:
When you use classes within the css file, the classes are applied in the order that they are written. Since the shown class is above the subtier2-options class, it gets applied first. So, display is set to block and then changed to none, when subtier2-options is applied.
You just have to change the order of the classes within the css, as below, and then it works.
<!-- begin snippet: js hide: false console: true babel: null -->
<!-- language: lang-js -->
$(".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')
});
<!-- language: lang-css -->
.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;
}
<!-- language: lang-html -->
<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>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论