Пользовательский стиль радио кнопки не сбрасывается после нажатия кнопки сброса

Question

Кнопка сброса должна дважды щелкнуть дважды, чтобы работать (удалить выбранный класс метки).

$(document).ready(function() { 
    $(".model-list li input").click(function(e) { 
    $(".model-list li label").removeClass("selected"); 
    if (!$(this).parent().hasClass("selected")) { 
     $(this).parent().addClass("selected"); 
    } 
    }); 
    initBtns(); 
    $(".reset-btn").click(function() { 
    initBtns(); 
    }); 

    function initBtns() { 
    $(".model-list li").each(function(e) { 
     if ($(this).find('input').is(":checked")) { 
     $(this).find('label').addClass("selected"); 
     } else { 
     $(this).find('label').removeClass("selected"); 
     } 
    }); 
    } 
}); 

Это jsfiddle результат: https://jsfiddle.net/qh8f3rw6/

Спасибо.

Answer 1

Ваша проблема здесь состоит в том, что reset формы на самом деле происходит только после того, как ваша initBtns функция на самом деле работает. Что вам действительно нужно сделать, это вызвать reset() функции перед initBtns():

$(".reset-btn").click(function() { 
    $(this).closest('form').get(0).reset(); 
    initBtns(); 
}); 

Answer 2

Или вы могли бы пойти с CSS единственным решением:

обернуть метки в элементе:

<li> 
    <label class="cursor"> 
    <input type="radio" name="model" value="64" /> <span>64 GB</span>  
    </label> 
</li> 

, чтобы вы могли стилизовать его только с помощью css:

.model-list li label input:checked + span { 
    border: 1px solid #3c8dbc; 
    background: #eaeaea; 
} 

demo: https://jsfiddle.net/qh8f3rw6/2/