Steven Steven - 1 month ago 6
CSS Question

Custom radio button style not reset after reset button is clicked

The reset button need to click twice to work (remove the selected class of label).

$(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");
}
});
}
});


This is the jsfiddle result:
https://jsfiddle.net/qh8f3rw6/


Thanks.

Answer

Your problem here is that the reset of the form is actually happen only after your initBtns function actually runs. What you actually need to do is call the reset() function before the initBtns():

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