如何將類別添加到單選按鈕組中未單擊的單選按鈕

Question

我有一個單選按鈕組，如下所示

<input type="radio" class="radiowear" name="wear_radio" shoe="" cloth="8" accessory="14" img="/male/C8A14">
<input type="radio" class="radiowear" name="wear_radio" shoe="" cloth="9" accessory="15" img="/male/C9A15">
<input type="radio" class="radiowear" name="wear_radio" shoe="" cloth="10" accessory="16" img="/male/C10A16">

等等..

使用JQuery單擊按鈕時，我需要向未單擊的單選按鈕添加CSS類。

下面的代碼無法正常工作，單擊時會添加一個類。

 $('.radiowear').click(function() { if ($('input:radio[name=wear_radio]').not(":checked")) { $(this).addClass('low-up'); } else { $(this).removeClass('low-up'); } console.log(this.getAttribute('class')); }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <input type="radio" class="radiowear" name="wear_radio" shoe="" cloth="8" accessory="14" img="/male/C8A14"> <input type="radio" class="radiowear" name="wear_radio" shoe="" cloth="9" accessory="15" img="/male/C9A15"> <input type="radio" class="radiowear" name="wear_radio" shoe="" cloth="10" accessory="16" img="/male/C10A16"> 

有什么更好的方法呢？ 謝謝。

Answer 1

只需更改所有類，然后刪除它-我必須包裹一個標簽才能看到對該類的任何更改。 如果要更改廣播上的類，請刪除.parent（）

我添加了一個已檢查的測試，以便在已經檢查過的情況下可以觸發更改加載

 const $wearradios = $('.radiowear'); $wearradios.on("change",function(e) { $wearradios.parent().addClass("low-up"); $(this).parent().toggleClass("low-up",!this.checked) }).change(); 

 .low-up { background-color:red } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <label><input type="radio" class="radiowear" name="wear_radio" data-shoe="" data-cloth="8" data-accessory="14" data-img="/male/C8A14"></label> <label><input type="radio" class="radiowear" name="wear_radio" data-shoe="" data-cloth="9" data-accessory="15" data-img="/male/C9A15"></label> <label><input type="radio" class="radiowear" name="wear_radio" data-shoe="" data-cloth="10" data-accessory="16" data-img="/male/C10A16"></label> 

Answer 2

• 停止使用無效的HTML5屬性。 請改用data-*屬性。

純CSS解決方案：

 [name="wear_radio"]:not(:checked) { outline: 2px solid red; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <input type="radio" name="wear_radio" data-shoe="" data-cloth="8" data-accessory="14" data-img="/male/C8A14"> <input type="radio" name="wear_radio" data-shoe="" data-cloth="9" data-accessory="15" data-img="/male/C9A15"> <input type="radio" name="wear_radio" data-shoe="" data-cloth="10" data-accessory="16" data-img="/male/C10A16"> 

jQuery解決方案

• 不要使用'click'事件。 您知道不用鼠標即可更改復選框嗎？ 使用'change'
• 使用jQuery的.attr()或.prop()進行回調

 const $wear_radio = $('[name="wear_radio"]'); $wear_radio.on('change', function() { $wear_radio.prop('class', function() { $(this).toggleClass('low-up', !this.checked) }); }); 

 .low-up { outline: 2px solid red; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <input type="radio" name="wear_radio" data-shoe="" data-cloth="8" data-accessory="14" data-img="/male/C8A14"> <input type="radio" name="wear_radio" data-shoe="" data-cloth="9" data-accessory="15" data-img="/male/C9A15"> <input type="radio" name="wear_radio" data-shoe="" data-cloth="10" data-accessory="16" data-img="/male/C10A16"> 

Answer 3

代替$(this).addClass('low-up'); ，獲取未選中的輸入並向其添加類。

 $('.radiowear').change(function() { const unCheckedInputs = $('input:radio[name=wear_radio]').not(":checked"); unCheckedInputs.addClass('low-up'); $(this).removeClass('low-up'); }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <input type="radio" class="radiowear" name="wear_radio" shoe="" cloth="8" accessory="14" img="/male/C8A14"> <input type="radio" class="radiowear" name="wear_radio" shoe="" cloth="9" accessory="15" img="/male/C9A15"> <input type="radio" class="radiowear" name="wear_radio" shoe="" cloth="10" accessory="16" img="/male/C10A16"> 

Answer 4

首先，不要聽廣播中的click事件； 如果我通過鍵盤或其他輸入方式更改它，則不會觸發。 而是監聽change事件。

其次，您需要.siblings() ：

$('.radiowear').on('change', function() {
    $(this).removeClass('low-up').siblings('.radiowear').addClass('low-up');
});

Answer 5

使用change事件和siblings()

 $('.radiowear').change(function() { $(this) .removeClass('low-up') .siblings() .addClass('low-up') }); 

 .radiowear:not(.low-up) { transform: scale(1.5); } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <input type="radio" class="radiowear" name="wear_radio" shoe="" cloth="8" accessory="14" img="/male/C8A14"> <input type="radio" class="radiowear" name="wear_radio" shoe="" cloth="9" accessory="15" img="/male/C9A15"> <input type="radio" class="radiowear" name="wear_radio" shoe="" cloth="10" accessory="16" img="/male/C10A16">