如果包含/不包含单选按钮值文本，则显示/隐藏 div

Question

我的新项目有一个奇怪的任务。 我有 2 个单选按钮，我必须根据单选按钮选择显示某些下拉 div。 所以单选按钮是 2，而 div 是更多，但我希望它只显示某些 div，这取决于单选按钮的选择。 我无法为 div 分配额外的类和 ID，所以我想尝试制作一个 javascript 来检查 radio 的值，看看它是否包含在 div 中并只显示包含 radio 值的 div。 这是示例：编辑：添加 JS

 $(document).ready(function(){ $('input[type="radio"]').click(function(){ var inputValue = $(this).attr("value"); var text = div.innerHTML; $("Radio1").not(text).hide(); $(text).show(); }); });

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <label class="container">Radio1 <input type="radio" checked="checked" name="radio" value="Radio1"> <span class="checkmark"></span> </label> <label class="container adult">Radio2 <input type="radio" name="radio" value="Radio2"> <span class="checkmark"></span> </label> <div class="select-items select-hide"> <div>1. Radio1 0</div> <div>1.1. Radio1 - 1</div> <div>1.2. Radio1 - 2</div> <div>1.3. Radio1 - 3</div> <div>1.4. Radio1 - 4</div> <div>1.5. Radio1 - 5</div> <div>1.5.1. Radio1 - 6</div> <div>1.5.2. Radio1 - 7</div> <div>1.5.3. Radio1 - 8 Loss</div> <div>1.5.4. Radio1 - 9</div> <div>1.6. Radio1 - 10</div> <div>1.7. Radio1 - 11</div> <div>2. Radio2 0</div> <div>2.1. Radio2 - 1</div> <div>2.2. Radio2 - 2</div> <div>2.3. Radio2 - 3</div> <div>2.4. Radio2 - 4</div> </div>

EDIT2：我忘了它也应该影响另一个 div 选择类以显示 Radio2 div 中的第一个。 现在这有点棘手。

<div class="select-selected">1. Radio1 0</div>

这是在具有类选择隐藏的 div 之上。

我没能成功。 任何想法如何做或从哪里重新开始？

问候！

Answer 1

您可以向两个input[radio]添加一个更改侦听器，然后在侦听器函数中，选择所有 div，隐藏它们，然后遍历每个 div 检查它的内容，如果它在其textContent中包含radio.value然后显示它.

看下面的代码，如果有帮助

 $("input[name='radio']").on("change", (ev) => { let elem = ev.target; if (elem.checked){ let divs = $(".select-hide div") let val = elem.value; divs.hide() divs.removeClass("select-selected") divs.each((i, div) => { let text = div.textContent if (text.indexOf(val) > -1){ div.style.display = "block" if (text.indexOf(val + " 0") > -1){ div.className += " select-selected"; } } }) } }) //below code is to call the change when doc starts, to let radio1 selected $("input[value='Radio1']").trigger("change")

 .select-hide div{ display: none; } .select-selected{ color: green; font-size: 20px }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <label class="container">Radio1 <input type="radio" checked="checked" name="radio" value="Radio1"> <span class="checkmark"></span> </label> <label class="container adult">Radio2 <input type="radio" name="radio" value="Radio2"> <span class="checkmark"></span> </label> <div class="select-items select-hide"> <div>1. Radio1 0</div> <div>1.1. Radio1 - 1</div> <div>1.2. Radio1 - 2</div> <div>1.3. Radio1 - 3</div> <div>1.4. Radio1 - 4</div> <div>1.5. Radio1 - 5</div> <div>1.5.1. Radio1 - 6</div> <div>1.5.2. Radio1 - 7</div> <div>1.5.3. Radio1 - 8 Loss</div> <div>1.5.4. Radio1 - 9</div> <div>1.6. Radio1 - 10</div> <div>1.7. Radio1 - 11</div> <div>2. Radio2 0</div> <div>2.1. Radio2 - 1</div> <div>2.2. Radio2 - 2</div> <div>2.3. Radio2 - 3</div> <div>2.4. Radio2 - 4</div> </div>

Answer 2

你可以这样做......使用jquery

 $(document).ready(function(){ function xyz(){ var getval = $('label.container input[type="radio"]:checked').val(); $('.select-items>div').each(function(){ if($(this).text().indexOf(getval) > -1){ $(this).show(); } else { $(this).hide(); } }); } xyz(); $('label.container input[type="radio"]').click(function(){ xyz(); }); });

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <label class="container">Radio1 <input type="radio" checked="checked" name="radio" value="Radio1"> <span class="checkmark"></span> </label> <label class="container adult">Radio2 <input type="radio" name="radio" value="Radio2"> <span class="checkmark"></span> </label> <div class="select-items select-hide"> <div>1. Radio1 0</div> <div>1.1. Radio1 - 1</div> <div>1.2. Radio1 - 2</div> <div>1.3. Radio1 - 3</div> <div>1.4. Radio1 - 4</div> <div>1.5. Radio1 - 5</div> <div>1.5.1. Radio1 - 6</div> <div>1.5.2. Radio1 - 7</div> <div>1.5.3. Radio1 - 8 Loss</div> <div>1.5.4. Radio1 - 9</div> <div>1.6. Radio1 - 10</div> <div>1.7. Radio1 - 11</div> <div>2. Radio2 0</div> <div>2.1. Radio2 - 1</div> <div>2.2. Radio2 - 2</div> <div>2.3. Radio2 - 3</div> <div>2.4. Radio2 - 4</div> </div>