在Jquery中触发复选框更改类

我是jQuery的新手。我正在尝试使用复选框进行切换。目前我已经走了这么远

$(function() {
  $('input.cbx').on('change', function() {
    if ($(this).prop("checked", true)) {
      $('body').addClass('dark');
    } else if ($(this).prop("checked", false)) {
      $('.body').addClass('light');
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="dn" type="checkbox" class="cbx hidden" />
<label for="dn" class="lbl"></label>

正如你所看到的，第一次点击后复选框保持选中状态，我想这是一个很好的情况，但是，你能帮我吗？

您实际上是在设置选中的属性，而不是获取。

$('input.cbx').on('change', function() {
    if($(this).prop("checked") ==  "true")
    {
      $('body').addClass('dark');
    } else if($(this).prop("checked") ==  "false")
    {
        $('.body').addClass('light');
    }
});

您可以使用this.checked或$(this).is(":checked")而不是$(this).prop("checked")

$('input.cbx').on('change', function() {
    if(this.checked) 
       $('body').addClass('dark');
    else
       $('.body').addClass('light');        
});

您也可以使用toggleClass

$('input.cbx').on('change', function() {     
     $('.body').toggleClass('light');        
});

注意：我看不到任何具有类主体的元素？您可能需要将类分配给标签。如果你想将切换效果应用到主体，然后删除点

实时演示

HTML

<body class="cbx">
<input id="dn" type="checkbox" class="cbx hidden"/>
      <label for="dn" class="lbl">123</label>
</body>

Javascript

$('input.cbx').on('change', function() {     
     $('body').toggleClass('light');        
});

$('input.cbx').on('change', function () {
    if ($(this).is(":checked")) {
        alert('checked');
    } else {
        alert('not checked');
    }
});

演示您可以使用$(this).is(":checked") 检查复选框是否选中

相关内容

最新更新

热门标签：