Menu
I am new to jQuery. I am trying to make a switcher using a checkbox. At the moment I have gone this far
$(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>As you can see the checkbox stay checked after the first click, I imagine is a noob situation but, can you help me please?
955
asked Sep 18 '25 20:09
You are actually setting the checked property instead of getting.
$('input.cbx').on('change', function() {
if($(this).prop("checked") == "true")
{
$('body').addClass('dark');
} else if($(this).prop("checked") == "false")
{
$('.body').addClass('light');
}
});
You can use this.checked or $(this).is(":checked") instead of $(this).prop("checked")
$('input.cbx').on('change', function() {
if(this.checked)
$('body').addClass('dark');
else
$('.body').addClass('light');
});
You can also use toggleClass
$('input.cbx').on('change', function() {
$('.body').toggleClass('light');
});
Note: I could not see any element with class body? You probably need to assign class to label. If you want to apply the toggle effect to body then remove dot
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');
});
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
