Jquery 选中未选中的过渡不起作用

Question

我有一个 HTML 和 jQuery onclick 事件是这样的：

$(document).on('click', '.switch-input', function(e) {
  $("#switch-2").attr('checked', !$('#switch-2').is(':checked'));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="switch" class="switch">
  <input id="switch-2" type="checkbox" class="switch-input  cekirajMe">
  <label for="switch-2" class="switch-label">Switch</label>
</div>

但由于某些原因，这不起作用...我想在按下 button/label 时进行平滑过渡（即选中或取消选中复选框）。

有人可以帮我吗？

我做错了什么？

Answer 1

尝试使用这个：

$(document).on('click', '#switch', function(e) {
  $("input",this).attr('checked', $('input',this).is(':checked'));
});

你的逻辑似乎有点奇怪，因为 .switch-input 和 #switch-2 是同一个元素。

但老实说，您甚至不需要 jquery 来执行此操作，请查看演示，我已经删除了 jquery，它工作得很好。

演示

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="switch" class="switch">
  <input id="switch-2" type="checkbox" class="switch-input  cekirajMe">
  <label for="switch-2" class="switch-label">Switch</label>
</div>

Answer 2

您要求 JavaScript 做 HTML 默认为您做的事情，使用它自己的属性。

因此，当它到达 $("#switch-2").attr('checked', !$('#switch-2').is(':checked')); 时，它更改了已被 HTML 的默认行为更改的值，并且未选中的复选框显示为未选中，但实际上它的值已更改回未选中上面突出显示的行。

var i= 0;
$(document).on('click', '.switch-input', function(e) {alert('i'+ ++i+$("#switch-2:checked").length);
  //$("#switch-2").attr('checked', !$('#switch-2').is(':checked'));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="switch" class="switch">
  <input id="switch-2" type="checkbox" class="switch-input  cekirajMe">
  <label for="switch-2" class="switch-label">Switch</label>
</div>

现在您知道是什么导致了问题，您实际上不需要点击事件侦听器和 jQuery 因为这是 HTML 复选框应该做的事情默认行为。

Jquery 选中未选中的过渡不起作用

Jquery checked unchecked transition not working

javascript

jquery

events

onclick

jquery-events