如果包含/不包含單選按鈕值文本，則顯示/隱藏 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>