选中点击项和样式的移入移除

最新推荐文章于 2024-01-18 10:00:29 发布

原创最新推荐文章于 2024-01-18 10:00:29 发布 · 619 阅读

0 ·

CC 4.0 BY-SA版权

js 专栏收录该内容

30 篇文章

订阅专栏

本文介绍了一个简单的JavaScript函数chgDayPlanCheckStatus，该函数用于改变页面元素中复选框的状态，并根据复选框的状态调整相关列表项的颜色。通过jQuery简化了DOM操作，实现了动态切换效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

点击事件中设置
function chgDayPlanCheckStatus (obj) {

$(obj).find(":checkbox").prop("checked", !$(obj).find(":checkbox").prop("checked")); //!$(obj).find(":checkbox").prop("checked")返回checkbox选中的值（checked）的相反数

if($(obj).find("li").hasClass("color")){ //对css的移入移除

$(obj).find("li").removeClass("color");

$(obj).find("li").css("color","#2277DA");
} else {
$(obj).find("li").addClass("color");
$(obj).find("li").css("color","black");
}

}

css中：

.color {
color:black;
}

body中：

var div = $("<div class='checkbox-dayPlan' onclick='chgDayPlanCheckStatus(this)'><input type='checkbox' name='arrReordIds' class='chkbox arrReordIds' value='" + element.recordId + "'/><label></label><li class='color' style='margin:16px;'> "+element.name+"</li></div>");