javascript - jQuery:如何检查某些复选框是否被选中，并相应地更改样式？

Question

我一直在努力解决这个问题，但不确定使用 jQuery 以何种方式处理它。我有一个类表，根据勾选的类，我想改变tbody的背景来反射(reflect)满足这个要求。

      <tbody>
          <tr class="active header">
            <th colspan="5"><b>Math (3 Courses)</b></th>
          </tr>
          <tr>
            <td>MAC2311</td>
            <td>Calculus I w/ Analytic Geometry</td>
            <td>4</td>
            <td></td>
            <td><input type="checkbox" name="math" value="MAC2311"></td>
          </tr>
          <tr>
            <td>MAC2312</td>
            <td>Calculus II w/ Analytic Geometry</td>
            <td>4</td>
            <td>MAC2311 or MAC2281</td>
            <td><input type="checkbox" name="math"value="MAC2312"></td>
          </tr>
          <tr>
            <td>MAC2281</td>
            <td>Calculus for Engineers I</td>
            <td>4</td>
            <td></td>
            <td><input type="checkbox" name="math" value="MAC2281"></td>
          </tr>
          <tr>
            <td>MAC2282</td>
            <td>Calculus for Engineers II</td>
            <td>4</td>
            <td>MAC2311 or MAC2281</td>
            <td><input type="checkbox"  name="math" value="MAC2282"></td>
          </tr>
          <tr>
            <td>Math Elective</td>
            <td>(Math Elective)</td>
            <td>4</td>
            <td>MAC2312 or MAC2282</td>
            <td><input type="checkbox" name="math" value="math_elective"></td>
          </tr>
        </tbody>

因此，例如，如果选中 MAC2311、MAC2312 和 math_elective，则主体的背景颜色会变为绿色以表示该部分已完成。

Answer 1

您可以使用 :checked 选择器选择所有选中的输入:

$("input[type=checkbox]:checked")

查看是否选中了任何复选框:

var isAtLeastOneChecked = ($("input[type=checkbox]:checked").length > 0);

if (isAtLeastOneChecked) {
    // color your tbody
}