Question

我一直试图解决这个问题，但我不确定使用jQuery以何种方式处理它。我有一个类表，根据检查的类，我想改变tbody的背景，以反映满足这些要求。

      <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，则tbody的背景颜色可以更改为绿色以表示该部分的完成。

Answer 1

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

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

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

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

if (isAtLeastOneChecked) {
    // color your tbody
}

Answer 2

您可以使用

之类的更改处理程序

.selected {
    background-color: green;
}

然后

jQuery(function ($) {
    $('input[name="math"]').change(function () {
        var $tbody = $(this).closest('tbody');
        $tbody.toggleClass('selected', $tbody.find('input[name="math"]:checked').length == 3)
    })
})

演示：Fiddle

如果有3个选中的复选框

，我们在这里将类selected添加到tbody

Answer 3

您可能希望为自己的input和td元素分配ID。

var MAC2311 = document.getElementById('idOfThatInput');

var 2311td = document.getElementById('idOftd');

if (MAC2311.checked) ("#2311td").css("background", "green");

或使用包含要检查的元素的Array，并在for循环中进行比较而不是单独进行比较。

Answer 4

（文档）$。就绪（函数（）{

$("#youTableId input").click(function () {

  //Now $(this) will point to the element that has raised the event
  and you can do something like this 
  alert($(this).is(':checked'));

  //Now you now $(this) is the element that raised the event.
  //You can get all the attributes of the element like name, id value, whether its check or not etc by using attr() function.

  $(this).attr("value");
});

}

jQuery：如何检查是否选中了某些复选框，并相应地更改样式？

4 个答案: