单击时未检查复选框输入（CSS 切换开关样式）答案

【问题标题】：Checkbox input not checking when clicked (CSS toggle switch styling)单击时未检查复选框输入（CSS 切换开关样式）
【发布时间】：2025-12-11 01:25:01
【问题描述】：

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

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

我做了一个小提琴来演示这个问题：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

【问题讨论】：

你的小提琴似乎工作得很好

标签： javascript jquery html css checkbox

【解决方案1】：

使用.prop() 而不是.attr() 表示checked 状态，因为checked 是元素的属性，不要使用内联事件绑定。

另请参阅.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

在输入元素上绑定事件并获取输入特定值：

$('.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

【讨论】：

有没有一种简洁的方法让它只注册一次点击而不是一次点击显示“未选中...已选中”？
您在答案中发布的更新代码 sn-p 效果很好，但更新后的 Fiddle 仍然会产生旧的不良效果。当然仍然将您的答案标记为正确，只是认为您可能想用相同的代码修复小提琴以帮助未来的访问者避免混淆。感谢您的帮助！
我很高兴它有帮助！我已经更新了小提琴.. Happy Coding

【解决方案2】：

将 onclick 事件附加到输入而不是标签： https://jsfiddle.net/w1ug4jdc/1/

  <input type="checkbox" onclick="$('#updates').append('<p>checked='+$(this).find('input').attr('checked')+'</p>');" />

（但如上，不要使用内联事件）

【讨论】：

【解决方案3】：

似乎 jQuery 没有读取“checked”属性。

尝试使用:checked selector

$("label").click(function(){
  $('#updates')
    .append('<p>checked='+$(this).find(':checkbox').is(':checked')+'</p>');
})

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<label onclick="">
  <input type="checkbox" />
</label>

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

【讨论】：