Nic*_*oni 3 javascript checkbox jquery triggers
我是 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');
});
| 归档时间： |
|
| 查看次数： |
7944 次 |
| 最近记录： |