javascript - 单击时复选框输入不检查(CSS 切换开关样式)

Question

我正在使用 custom CSS toggle switch为我的复选框输入设置样式。 GitHub Project

但是，当您单击其中一个复选框切换时，它会记录两次单击并且永远不会更改选中的值。如果复选框开始未选中，它将保持未选中状态。如果它开始时处于选中状态，它将保持选中状态。

我制作了一个 fiddle 来演示这个问题:https://jsfiddle.net/w1ug4jdc/

带样式的复选框的 HTML 如下所示:

<label class="switch-light switch-candy" onclick="doSomething($(this));">
  <input type="checkbox" />

  <strong>
    Wireless
  </strong>

  <span>
    <span>Off</span>
    <span>On</span>
    <a></a>
  </span>
</label>

这是完成所有样式的 CSS 文件:https://github.com/ghinda/css-toggle-switch/blob/master/dist/toggle-switch.css

Answer 1

Use .prop() not .attr() for checked status as checked is a property of the element and do not use inline event binding.

另请参阅 .prop() vs .attr()

试试这个:

$('.switch-light.switch-candy').on('click', function() {
  $('#updates').append('<p>checked=' + $(this).find('input').prop('checked') + '</p>');
})

<link href="https://merkd.com/engine/ui/themes/lux/assets/css/toggle-switch.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<label class="switch-light switch-candy">
  <input type="checkbox" />

  <strong>
    Wireless
  </strong>

  <span>
    <span>Off</span>
  <span>On</span>
  <a></a>
  </span>
</label>

<div id="updates"></div>

Fiddle

在输入元素上绑定(bind)事件并获取输入特定值:

$('.switch-light.switch-candy input').on('click', function() {
  $('#updates').append('<p>checked=' + this.checked + '</p>');
})

<link href="https://merkd.com/engine/ui/themes/lux/assets/css/toggle-switch.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<label class="switch-light switch-candy">
  <input type="checkbox" />

  <strong>
    Wireless
  </strong>

  <span>
    <span>Off</span>
  <span>On</span>
  <a></a>
  </span>
</label>

<div id="updates"></div>

Updated Fiddle