jquery - 单击重置按钮后自定义单选按钮样式不会重置

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

您的问题是表单的重置实际上只发生在您的initBtns 函数实际运行之后。您实际需要做的是在 initBtns() 之前调用 reset() 函数:

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