gpt4 book ai didi

javascript - 使用 jquery 在检查操作上切换复选框的父类

转载 作者:太空宇宙 更新时间:2023-11-04 04:05:23 24 4
gpt4 key购买 nike

我正在尝试制作一个包含多个复选框的表单。我想突出显示复选框及其内容以向选择的用户指示
我正在为我的表单使用以下布局

HTML

<form>
<div class=labl>
<input type=checkbox id='alpha' />
<label for='alpha'>Checkbox1</label>
</div>

CSS

.labl{

height:50px;
}
.labl:hover{
background:#ccc;
}
.chked {
background: #4285f4;
height:50px;
}

jQuery
<script>

$("input[type=checkbox]").change(function() {
$(this).parent().toggleClass("chked");
});

</script>


现在,当检查 alpha 时,它应该将 div 的类从 labl 更改为 chked
但它不是

最佳答案

您需要像这样的 DOM 就绪处理程序 $(function(){...});

$(function () {
$("input[type=checkbox]").change(function () {
$(this).parent().toggleClass("chked");
});
});

Documentation

更新

看起来复选框是动态添加到 DOM 中的,因此您必须像这样使用事件委托(delegate)

    $(document).on("change","input[type=checkbox]",function () {
$(this).parent().toggleClass("chked");
});

关于javascript - 使用 jquery 在检查操作上切换复选框的父类,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21456698/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com