jQuery设置选中的course_select前缀复选框字体为红色失效怎么办

问题根因 #

你编写的代码没有生效是因为：$("input:checkbox[name^='course_select']:checked")选中的是<input>复选框元素本身，表单类的<input>元素的colorCSS属性不会作用到它后面跟随的选项文本上，这些文本是和<input>平级的独立文本节点，不属于<input>的内部内容。
而你测试用的$("*").css('color', 'red')会选中页面所有元素，包括承载这些文本节点的上层父元素（比如<body>），颜色属性可以被子元素/文本节点继承，所以全局生效。

解决方案 #

方案1：不修改现有HTML结构，直接调整JS逻辑

遍历选中的已勾选复选框，修改它后方相邻的文本节点样式即可：

function AlertFunction() {
  $("input:checkbox[name^='course_select']:checked").each(function() {
    // 把相邻文本节点包裹进span标签后设置颜色
    $(this.nextSibling).wrap('<span></span>').parent().css('color', 'red');
  });
}

方案2：优化HTML结构后实现（更符合规范）

首先给每个复选框加<label>标签包裹住输入框和选项文本：

<script src="http://code.jquery.com/jquery-3.6.0.min.js"></script>
<link href='https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css'>
<script src="http://code.jquery.com/ui/1.11.0/jquery-ui.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.inputmask/3.1.60/inputmask/jquery.inputmask.js"></script>

<label><input type="checkbox" name="course_select">item1</label>
<label><input type="checkbox" name="course_select2">item2</label>
<label><input type="checkbox" name="course_select3">item3</label>
<button  type="button" onclick="AlertFunction()">change color</button>

再调整JS逻辑，选中复选框的父级<label>设置颜色即可：

function AlertFunction() {
  $("input:checkbox[name^='course_select']:checked").parent('label').css('color', 'red');
}

内容的提问来源于stack exchange，提问作者django