HTML 更改單選按鈕背景

Question

我希望 foreach <ul>的背景顏色與淺灰色保持相同。

當前單擊單選按鈕時，它會錯誤地更改 ul 背景。 我不知道如何通過所有可用的 ul 使 jquery 腳本循環，如果腳本可以很小，我真的很感激，因為這個概念將應用於 100+ ul

 $(document).ready(function() { $("ul.options-list li").on("click",function() { if($(this).find('input[type="radio"]').is(':checked')) { $('ul.options-list li').removeClass('change_color'); $(this).addClass('change_color'); } }); });

 ul.options-list li.change_color{ background-color: lightgray; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div> Q1 <ul class="options-list"> <li> <input type="radio" name="r1" id="1" value="1" data-toggle="radio">O1 </li> <li> <input type="radio" name="r1" id="2" value="2" data-toggle="radio">O2 </li> </ul> </div> <div> Q2 <ul class="options-list"> <li> <input type="radio" name="r2" id="3" value="3" data-toggle="radio">A1 </li> <li> <input type="radio" name="r2" id="4" value="4" data-toggle="radio">A2 </li> </ul> </div>

Answer 1

您可以使用each循環遍歷您的ul li然后使用$(this)來檢查是否根據此add或remove您的類檢查無線電。

演示代碼：

 $(document).ready(function() { $("ul.options-list li").on("click", function() { //loop through ul li $("ul.options-list li").each(function() { if ($(this).find('input[type="radio"]').is(':checked')) { $(this).addClass('change_color');//add change_Color } else { $(this).removeClass('change_color');//remove same } }) }); });

 ul.options-list li.change_color { background-color: lightgray; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div> Q1 <ul class="options-list"> <li> <input type="radio" name="r1" id="1" value="1" data-toggle="radio">O1 </li> <li> <input type="radio" name="r1" id="2" value="2" data-toggle="radio">O2 </li> </ul> </div> <div> Q2 <ul class="options-list"> <li> <input type="radio" name="r2" id="3" value="3" data-toggle="radio">A1 </li> <li> <input type="radio" name="r2" id="4" value="4" data-toggle="radio">A2 </li> </ul> </div>

Answer 2

我不擅長 javascript。

但也許給你所有的單選按鈕相同的類並添加這樣的東西

document.getElementByClass("myCheck").checked = true;

然后將Class('change_color') 添加到選定的那些。

https://www.w3schools.com/jsref/prop_checkbox_checked.asp