尝试将单选按钮放置在单选按钮内。

huangapple go评论108阅读模式
英文:

Trying to put radio buttons inside a radio button

问题

以下是您提供的代码的翻译部分:

  1. $(".tier1-options :radio").on("change", function (e) {
  2. // 从所有tier2选项中删除已显示的类并清除其中所有表单元素的值
  3. $('.tier2-options')
  4. .removeClass('shown')
  5. .find('input, select').val('')
  6. // 显示相关的tier2选项
  7. $(this)
  8. .parents('.tier1-options')
  9. .find('.tier2-options')
  10. .addClass('shown')
  11. });
  12. $(".subtier1-options :radio").on("change", function (e) {
  13. // 从所有subtier2选项中删除已显示的类并清除其中所有表单元素的值
  14. $('.subtier2-options')
  15. .removeClass('shown')
  16. .find('input, select').val('')
  17. // 显示相关的subtier2选项
  18. $(this)
  19. .parents('.subtier1-options')
  20. .find('.subtier2-options')
  21. .addClass('shown')
  22. });
  1. .tier2-options {
  2. display: none;
  3. margin-left: 1rem;
  4. padding: 1rem;
  5. background-color: #EEE;
  6. }
  7. .shown{
  8. display: block;
  9. }
  10. .subtier2-options {
  11. display: none;
  12. margin-left: 1rem;
  13. padding: 1rem;
  14. background-color: #EEE;
  15. }

这是您提供的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 -->

  1. $(&quot;.tier1-options :radio&quot;).on(&quot;change&quot;, function (e) {
  2. //remove shown class from all tier2 options and clear values from all form elements inside it
  3. $(&#39;.tier2-options&#39;)
  4. .removeClass(&#39;shown&#39;)
  5. .find(&#39;input, select&#39;).val(&#39;&#39;)
  6. //show the related tier2 options
  7. $(this)
  8. .parents(&#39;.tier1-options&#39;)
  9. .find(&#39;.tier2-options&#39;)
  10. .addClass(&#39;shown&#39;)
  11. });

<!-- language: lang-css -->

  1. .tier2-options {
  2. display: none;
  3. margin-left: 1rem;
  4. padding: 1rem;
  5. background-color: #EEE;
  6. }
  7. .shown{
  8. display: block;
  9. }

<!-- language: lang-html -->

  1. &lt;script src=&quot;https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js&quot;&gt;&lt;/script&gt;
  2. &lt;h5&gt;Select one of the checkboxes:&lt;/h5&gt;
  3. &lt;div class=&#39;tier1-options&#39;&gt;
  4. &lt;label&gt;
  5. &lt;input name=&quot;useroption&quot; type=&quot;radio&quot; value=&quot;changeLocation&quot;&gt;
  6. Change Location
  7. &lt;/label&gt;
  8. &lt;div class=&quot;tier2-options&quot;&gt;
  9. &lt;select name=&quot;availableMarkAsFullLocations&quot;&gt;
  10. &lt;option value=&quot;-&quot;&gt;--Please Select--&lt;/option&gt;
  11. &lt;option value=&quot;3&quot;&gt;BOX#3&lt;/option&gt;
  12. &lt;option value=&quot;6&quot;&gt;FREEZER#1&lt;/option&gt;
  13. &lt;option value=&quot;8&quot;&gt;FREEZER#2&lt;/option&gt;
  14. &lt;option value=&quot;19&quot;&gt;BOX#9&lt;/option&gt;
  15. &lt;option value=&quot;20&quot;&gt;QBUILDING&lt;/option&gt;
  16. &lt;/select&gt;
  17. &lt;/div&gt;
  18. &lt;/div&gt;
  19. &lt;div class=&quot;tier1-options&quot;&gt;
  20. &lt;label&gt;
  21. &lt;input name=&quot;useroption&quot; type=&quot;radio&quot; value=&quot;updateLocation&quot;&gt;
  22. Update Location
  23. &lt;/label&gt;
  24. &lt;div class=&quot;tier2-options&quot;&gt;
  25. &lt;select name=&quot;availableUpdateLocations&quot;&gt;
  26. &lt;option value=&quot;-&quot;&gt;--Please Select--&lt;/option&gt;
  27. &lt;option value=&quot;3&quot;&gt;BOX#3&lt;/option&gt;
  28. &lt;option value=&quot;6&quot;&gt;FREEZER#1&lt;/option&gt;
  29. &lt;option value=&quot;8&quot;&gt;FREEZER#2&lt;/option&gt;
  30. &lt;option value=&quot;19&quot;&gt;BOX#9&lt;/option&gt;
  31. &lt;/select&gt;
  32. &lt;/div&gt;
  33. &lt;/div&gt;
  34. &lt;div class=&quot;tier1-options&quot;&gt;
  35. &lt;label&gt;
  36. &lt;input name=&quot;useroption&quot; type=&quot;radio&quot; value=&quot;retireLocation&quot;&gt;
  37. Retire
  38. &lt;/label&gt;
  39. &lt;div class=&quot;tier2-options&quot;&gt;
  40. &lt;select name=&quot;availableRetireLocations&quot;&gt;
  41. &lt;option value=&quot;-&quot;&gt;--Please Select--&lt;/option&gt;
  42. &lt;option value=&quot;3&quot;&gt;BOX#3&lt;/option&gt;
  43. &lt;option value=&quot;6&quot;&gt;FREEZER#1&lt;/option&gt;
  44. &lt;option value=&quot;8&quot;&gt;FREEZER#2&lt;/option&gt;
  45. &lt;option value=&quot;19&quot;&gt;BOX#9&lt;/option&gt;
  46. &lt;option value=&quot;20&quot;&gt;QBUILDING&lt;/option&gt;
  47. &lt;/select&gt;
  48. &lt;/div&gt;
  49. &lt;/div&gt;

<!-- 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 -->

  1. $(&quot;.tier1-options :radio&quot;).on(&quot;change&quot;, function (e) {
  2. //remove shown class from all tier2 options and clear values from all form elements inside it
  3. $(&#39;.tier2-options&#39;)
  4. .removeClass(&#39;shown&#39;)
  5. .find(&#39;input, select&#39;).val(&#39;&#39;)
  6. //show the related tier2 options
  7. $(this)
  8. .parents(&#39;.tier1-options&#39;)
  9. .find(&#39;.tier2-options&#39;)
  10. .addClass(&#39;shown&#39;)
  11. });
  12. $(&quot;.subtier1-options :radio&quot;).on(&quot;change&quot;, function (e) {
  13. //remove shown class from all tier2 options and clear values from all form elements inside it
  14. $(&#39;.subtier2-options&#39;)
  15. .removeClass(&#39;shown&#39;)
  16. .find(&#39;input, select&#39;).val(&#39;&#39;)
  17. //show the related tier2 options
  18. $(this)
  19. .parents(&#39;.subtier1-options&#39;)
  20. .find(&#39;.subtier2-options&#39;)
  21. .addClass(&#39;shown&#39;)
  22. });

<!-- language: lang-css -->

  1. .tier2-options {
  2. display: none;
  3. margin-left: 1rem;
  4. padding: 1rem;
  5. background-color: #EEE;
  6. }
  7. .shown{
  8. display: block;
  9. }
  10. .subtier2-options {
  11. display: none;
  12. margin-left: 1rem;
  13. padding: 1rem;
  14. background-color: #EEE;
  15. }

<!-- language: lang-html -->

  1. &lt;script src=&quot;https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js&quot;&gt;&lt;/script&gt;
  2. &lt;h5&gt;Select one of the checkboxes:&lt;/h5&gt;
  3. &lt;div class=&#39;tier1-options&#39;&gt;
  4. &lt;label&gt;
  5. &lt;input name=&quot;useroption&quot; type=&quot;radio&quot; value=&quot;changeLocation&quot;&gt;
  6. Change Location
  7. &lt;/label&gt;
  8. &lt;div class=&quot;tier2-options&quot;&gt;
  9. &lt;select name=&quot;availableMarkAsFullLocations&quot;&gt;
  10. &lt;option value=&quot;-&quot;&gt;--Please Select--&lt;/option&gt;
  11. &lt;option value=&quot;3&quot;&gt;BOX#3&lt;/option&gt;
  12. &lt;option value=&quot;6&quot;&gt;FREEZER#1&lt;/option&gt;
  13. &lt;option value=&quot;8&quot;&gt;FREEZER#2&lt;/option&gt;
  14. &lt;option value=&quot;19&quot;&gt;BOX#9&lt;/option&gt;
  15. &lt;option value=&quot;20&quot;&gt;QBUILDING&lt;/option&gt;
  16. &lt;/select&gt;
  17. &lt;/div&gt;
  18. &lt;/div&gt;
  19. &lt;div class=&quot;tier1-options&quot;&gt;
  20. &lt;label&gt;
  21. &lt;input name=&quot;useroption&quot; type=&quot;radio&quot; value=&quot;updateLocation&quot;&gt;
  22. Update Location
  23. &lt;/label&gt;
  24. &lt;div class=&quot;tier2-options&quot;&gt;
  25. &lt;select name=&quot;availableUpdateLocations&quot;&gt;
  26. &lt;option value=&quot;-&quot;&gt;--Please Select--&lt;/option&gt;
  27. &lt;option value=&quot;3&quot;&gt;BOX#3&lt;/option&gt;
  28. &lt;option value=&quot;6&quot;&gt;FREEZER#1&lt;/option&gt;
  29. &lt;option value=&quot;8&quot;&gt;FREEZER#2&lt;/option&gt;
  30. &lt;option value=&quot;19&quot;&gt;BOX#9&lt;/option&gt;
  31. &lt;/select&gt;
  32. &lt;/div&gt;
  33. &lt;/div&gt;
  34. &lt;div class=&quot;tier1-options&quot;&gt;
  35. &lt;label&gt;
  36. &lt;input name=&quot;useroption&quot; type=&quot;radio&quot; value=&quot;retireLocation&quot;&gt;
  37. Retire
  38. &lt;/label&gt;
  39. &lt;div class=&quot;tier2-options&quot;&gt;
  40. &lt;select name=&quot;availableRetireLocations&quot;&gt;
  41. &lt;option value=&quot;-&quot;&gt;--Please Select--&lt;/option&gt;
  42. &lt;option value=&quot;3&quot;&gt;BOX#3&lt;/option&gt;
  43. &lt;option value=&quot;6&quot;&gt;FREEZER#1&lt;/option&gt;
  44. &lt;option value=&quot;8&quot;&gt;FREEZER#2&lt;/option&gt;
  45. &lt;option value=&quot;19&quot;&gt;BOX#9&lt;/option&gt;
  46. &lt;option value=&quot;20&quot;&gt;QBUILDING&lt;/option&gt;
  47. &lt;/select&gt;
  48. &lt;/div&gt;
  49. &lt;/div&gt;
  50. &lt;div class=&#39;tier1-options&#39;&gt;
  51. &lt;label&gt;
  52. &lt;input name=&quot;useroption&quot; type=&quot;radio&quot; value=&quot;moveContents&quot;&gt;
  53. Move Contents
  54. &lt;/label&gt;
  55. &lt;div class=&quot;tier2-options&quot;&gt;
  56. &lt;div class=&#39;subtier1-options&#39;&gt;
  57. &lt;label&gt;
  58. &lt;input name=&quot;useroption&quot; type=&quot;radio&quot; value=&quot;moveContentsTierI&quot;&gt;
  59. Tier I move
  60. &lt;/label&gt;
  61. &lt;div class=&quot;subtier2-options&quot;&gt;
  62. &lt;select name=&quot;availableTierILocations&quot;&gt;
  63. &lt;option value=&quot;-&quot;&gt;--Please Select--&lt;/option&gt;
  64. &lt;option value=&quot;3&quot;&gt;BOX#3&lt;/option&gt;
  65. &lt;option value=&quot;6&quot;&gt;FREEZER#1&lt;/option&gt;
  66. &lt;option value=&quot;8&quot;&gt;FREEZER#2&lt;/option&gt;
  67. &lt;option value=&quot;19&quot;&gt;BOX#9&lt;/option&gt;
  68. &lt;option value=&quot;20&quot;&gt;QBUILDING&lt;/option&gt;
  69. &lt;/select&gt;
  70. &lt;/div&gt;
  71. &lt;/div&gt; &lt;!--end of &lt;div class=&#39;subtier1-options&#39;&gt; --&gt;
  72. &lt;div class=&#39;subtier1-options&#39;&gt;
  73. &lt;label&gt;
  74. &lt;input name=&quot;useroption&quot; type=&quot;radio&quot; value=&quot;moveContentsTierII&quot;&gt;
  75. Tier II move
  76. &lt;/label&gt;
  77. &lt;div class=&quot;subtier2-options&quot;&gt;
  78. &lt;select name=&quot;availableTierIILocations&quot;&gt;
  79. &lt;option value=&quot;-&quot;&gt;--Please Select--&lt;/option&gt;
  80. &lt;option value=&quot;3&quot;&gt;BOX#3&lt;/option&gt;
  81. &lt;option value=&quot;6&quot;&gt;FREEZER#1&lt;/option&gt;
  82. &lt;option value=&quot;8&quot;&gt;FREEZER#2&lt;/option&gt;
  83. &lt;option value=&quot;19&quot;&gt;BOX#9&lt;/option&gt;
  84. &lt;option value=&quot;20&quot;&gt;QBUILDING&lt;/option&gt;
  85. &lt;/select&gt;
  86. &lt;/div&gt;
  87. &lt;/div&gt; &lt;!--end of &lt;div class=&#39;subtier1-options&#39;&gt; --&gt;
  88. &lt;/div&gt;
  89. &lt;/div&gt;

<!-- end snippet -->

答案1

得分: 0

在CSS文件中使用类时,类的应用顺序与它们的书写顺序一致。因此,shown类位于subtier2-options类之上,它会首先被应用。所以,当应用subtier2-options类时,显示被设置为block,然后再更改为none

您只需要在CSS中更改类的顺序,如下所示,然后它就可以正常工作。

  1. .shown{
  2. display: block;
  3. }
  4. .tier2-options {
  5. display: none;
  6. margin-left: 1rem;
  7. padding: 1rem;
  8. background-color: #EEE;
  9. }
  10. .subtier2-options {
  11. display: none;
  12. margin-left: 1rem;
  13. padding: 1rem;
  14. background-color: #EEE;
  15. }

这将确保shown类在tier2-optionssubtier2-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 -->

  1. $(&quot;.tier1-options :radio&quot;).on(&quot;change&quot;, function (e) {
  2. //remove shown class from all tier2 options and clear values from all form elements inside it
  3. $(&#39;.tier2-options&#39;)
  4. .removeClass(&#39;shown&#39;)
  5. .find(&#39;input, select&#39;).val(&#39;&#39;)
  6. //show the related tier2 options
  7. $(this)
  8. .parents(&#39;.tier1-options&#39;)
  9. .find(&#39;.tier2-options&#39;)
  10. .addClass(&#39;shown&#39;)
  11. });
  12. $(&quot;.subtier1-options :radio&quot;).on(&quot;change&quot;, function (e) {
  13. //remove shown class from all tier2 options and clear values from all form elements inside it
  14. $(&#39;.subtier2-options&#39;)
  15. .removeClass(&#39;shown&#39;)
  16. .find(&#39;input, select&#39;).val(&#39;&#39;)
  17. //show the related tier2 options
  18. $(this)
  19. .parents(&#39;.subtier1-options&#39;)
  20. .find(&#39;.subtier2-options&#39;)
  21. .addClass(&#39;shown&#39;)
  22. });

<!-- language: lang-css -->

  1. .tier2-options {
  2. display: none;
  3. margin-left: 1rem;
  4. padding: 1rem;
  5. background-color: #EEE;
  6. }
  7. .subtier2-options {
  8. display: none;
  9. margin-left: 1rem;
  10. padding: 1rem;
  11. background-color: #EEE;
  12. }
  13. .shown{
  14. display: block;
  15. }

<!-- language: lang-html -->

  1. &lt;script src=&quot;https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js&quot;&gt;&lt;/script&gt;
  2. &lt;h5&gt;Select one of the checkboxes:&lt;/h5&gt;
  3. &lt;div class=&#39;tier1-options&#39;&gt;
  4. &lt;label&gt;
  5. &lt;input name=&quot;useroption&quot; type=&quot;radio&quot; value=&quot;changeLocation&quot;&gt;
  6. Change Location
  7. &lt;/label&gt;
  8. &lt;div class=&quot;tier2-options&quot;&gt;
  9. &lt;select name=&quot;availableMarkAsFullLocations&quot;&gt;
  10. &lt;option value=&quot;-&quot;&gt;--Please Select--&lt;/option&gt;
  11. &lt;option value=&quot;3&quot;&gt;BOX#3&lt;/option&gt;
  12. &lt;option value=&quot;6&quot;&gt;FREEZER#1&lt;/option&gt;
  13. &lt;option value=&quot;8&quot;&gt;FREEZER#2&lt;/option&gt;
  14. &lt;option value=&quot;19&quot;&gt;BOX#9&lt;/option&gt;
  15. &lt;option value=&quot;20&quot;&gt;QBUILDING&lt;/option&gt;
  16. &lt;/select&gt;
  17. &lt;/div&gt;
  18. &lt;/div&gt;
  19. &lt;div class=&quot;tier1-options&quot;&gt;
  20. &lt;label&gt;
  21. &lt;input name=&quot;useroption&quot; type=&quot;radio&quot; value=&quot;updateLocation&quot;&gt;
  22. Update Location
  23. &lt;/label&gt;
  24. &lt;div class=&quot;tier2-options&quot;&gt;
  25. &lt;select name=&quot;availableUpdateLocations&quot;&gt;
  26. &lt;option value=&quot;-&quot;&gt;--Please Select--&lt;/option&gt;
  27. &lt;option value=&quot;3&quot;&gt;BOX#3&lt;/option&gt;
  28. &lt;option value=&quot;6&quot;&gt;FREEZER#1&lt;/option&gt;
  29. &lt;option value=&quot;8&quot;&gt;FREEZER#2&lt;/option&gt;
  30. &lt;option value=&quot;19&quot;&gt;BOX#9&lt;/option&gt;
  31. &lt;/select&gt;
  32. &lt;/div&gt;
  33. &lt;/div&gt;
  34. &lt;div class=&quot;tier1-options&quot;&gt;
  35. &lt;label&gt;
  36. &lt;input name=&quot;useroption&quot; type=&quot;radio&quot; value=&quot;retireLocation&quot;&gt;
  37. Retire
  38. &lt;/label&gt;
  39. &lt;div class=&quot;tier2-options&quot;&gt;
  40. &lt;select name=&quot;availableRetireLocations&quot;&gt;
  41. &lt;option value=&quot;-&quot;&gt;--Please Select--&lt;/option&gt;
  42. &lt;option value=&quot;3&quot;&gt;BOX#3&lt;/option&gt;
  43. &lt;option value=&quot;6&quot;&gt;FREEZER#1&lt;/option&gt;
  44. &lt;option value=&quot;8&quot;&gt;FREEZER#2&lt;/option&gt;
  45. &lt;option value=&quot;19&quot;&gt;BOX#9&lt;/option&gt;
  46. &lt;option value=&quot;20&quot;&gt;QBUILDING&lt;/option&gt;
  47. &lt;/select&gt;
  48. &lt;/div&gt;
  49. &lt;/div&gt;
  50. &lt;div class=&#39;tier1-options&#39;&gt;
  51. &lt;label&gt;
  52. &lt;input name=&quot;useroption&quot; type=&quot;radio&quot; value=&quot;moveContents&quot;&gt;
  53. Move Contents
  54. &lt;/label&gt;
  55. &lt;div class=&quot;tier2-options&quot;&gt;
  56. &lt;div class=&#39;subtier1-options&#39;&gt;
  57. &lt;label&gt;
  58. &lt;input name=&quot;useroption&quot; type=&quot;radio&quot; value=&quot;moveContentsTierI&quot;&gt;
  59. Tier I move
  60. &lt;/label&gt;
  61. &lt;div class=&quot;subtier2-options&quot;&gt;
  62. &lt;select name=&quot;availableTierILocations&quot;&gt;
  63. &lt;option value=&quot;-&quot;&gt;--Please Select--&lt;/option&gt;
  64. &lt;option value=&quot;3&quot;&gt;BOX#3&lt;/option&gt;
  65. &lt;option value=&quot;6&quot;&gt;FREEZER#1&lt;/option&gt;
  66. &lt;option value=&quot;8&quot;&gt;FREEZER#2&lt;/option&gt;
  67. &lt;option value=&quot;19&quot;&gt;BOX#9&lt;/option&gt;
  68. &lt;option value=&quot;20&quot;&gt;QBUILDING&lt;/option&gt;
  69. &lt;/select&gt;
  70. &lt;/div&gt;
  71. &lt;/div&gt; &lt;!--end of &lt;div class=&#39;subtier1-options&#39;&gt; --&gt;
  72. &lt;div class=&#39;subtier1-options&#39;&gt;
  73. &lt;label&gt;
  74. &lt;input name=&quot;useroption&quot; type=&quot;radio&quot; value=&quot;moveContentsTierII&quot;&gt;
  75. Tier II move
  76. &lt;/label&gt;
  77. &lt;div class=&quot;subtier2-options&quot;&gt;
  78. &lt;select name=&quot;availableTierIILocations&quot;&gt;
  79. &lt;option value=&quot;-&quot;&gt;--Please Select--&lt;/option&gt;
  80. &lt;option value=&quot;3&quot;&gt;BOX#3&lt;/option&gt;
  81. &lt;option value=&quot;6&quot;&gt;FREEZER#1&lt;/option&gt;
  82. &lt;option value=&quot;8&quot;&gt;FREEZER#2&lt;/option&gt;
  83. &lt;option value=&quot;19&quot;&gt;BOX#9&lt;/option&gt;
  84. &lt;option value=&quot;20&quot;&gt;QBUILDING&lt;/option&gt;
  85. &lt;/select&gt;
  86. &lt;/div&gt;
  87. &lt;/div&gt; &lt;!--end of &lt;div class=&#39;subtier1-options&#39;&gt; --&gt;
  88. &lt;/div&gt;
  89. &lt;/div&gt;

<!-- end snippet -->

huangapple
  • 本文由 发表于 2023年7月20日 09:39:15
  • 转载请务必保留本文链接:https://go.coder-hub.com/76726157.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定