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实际运行<{1}}函数后，表单的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;
}

演示：https://jsfiddle.net/qh8f3rw6/2/

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

2 个答案: