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>

但是由于某些原因，这不起作用...当按钮/标签被放置时，我想进行平滑的过渡（即复选框处于选中状态或未选中状态）。

有人可以帮我吗？

我在这里做什么错了？

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的默认行为更改的值，并且未选中的复选框显示为未选中，但实际上，它的值已由上面突出显示的行更改回为未选中。 / p>

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已检查的未检查过渡不起作用

2 个答案: