个人中心
gpt4 book ai didi

javascript - 在 Jquery 中触发复选框更改类

转载 作者：行者123 更新时间：2023-11-29 10:11:29 24 4
gpt4 key购买 nike

我是 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>

如您所见，复选框在第一次点击后保持选中状态，我想这是一个菜鸟情况，但是，您能帮帮我吗？

最佳答案

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

$('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');        
});

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

Live Demo

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');        
});

关于javascript - 在 Jquery 中触发复选框更改类，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32693986/

24 4 0
文章推荐： javascript - 从 Angular Controller 打开 Bootstrap 弹出窗口
文章推荐： php - Docker mysql 环境
文章推荐： c# - 无法打开登录请求的数据库 "testdb"。登录失败
文章推荐： java - 你把这个称作什么？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com