Question

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

＆＃13;

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

＆＃13;

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

＆＃13;

正如您在第一次点击后看到复选框保持检查状态一样，我认为这是一个菜鸟情况，但是，你可以帮我吗？

Answer 1

您实际上是设置了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');        
});

注意：我看不到任何带有类体的元素？您可能需要将类分配给标签。如果要将切换效果应用于正文，请删除点

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

Answer 2

您的情况有误，您正在设置复选框的已选中属性未获得其已检查状态。

要检查是否选中了复选框，请使用is(':checked')
请勿在其他部分

.

body

else if无需检查是否未选中复选框
您还需要使用removeClass
要显示对网页加载的影响，请使用trigger手动触发复选框

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

.dark {
  background: black;
  color: yellow;
}
.light {
  background: gray;
  color: red;
}

<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">Check it</label>

Answer 3

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

DEMO 您可以使用$(this).is(":checked")

检查是否选中了复选框

在Jquery中触发复选框更改类

3 个答案: