jquery是否选中了任何复选框答案

【问题标题】：jquery if any checkbox is checkedjquery是否选中了任何复选框
【发布时间】：2016-03-04 00:37:11
【问题描述】：

关于已选中的复选框有很多问题，但这有些不同。
如果用户选中任何复选框，我想显示一个 css 属性。如果用户取消选中所有应删除 css 属性的复选框。
我找到了这段代码

if (jQuery('#frmTest input[type=checkbox]:checked').length > 0) {
    $(".css-check").css("background-color", "yellow");
} else {
    $(".css-check").css("background-color", "pink");
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="frmTest">
    <input type="checkbox" name="vehicle" value="Car" class="test">I have a car
    <br>
    <input type="checkbox" name="vehicle" value="Car" class="test">I have a bike
    <br>
    <input type="checkbox" name="vehicle" value="Car" class="test">I have nothing
    <br>
</form>
<div class="css-check">TEST</div>

但这只有在我放置 checkbox="true" 时才有效。
简而言之：
如果用户未选中任何复选框，则背景颜色应为粉红色。如果一个复选框被选中，背景颜色应该是黄色的。

【问题讨论】：

顶部的代码什么时候执行？
jQuery see if any or no checkboxes are selected的可能重复

标签： javascript jquery html checkbox

【解决方案1】：

试试这个：

jQuery('#frmTest input[type=checkbox]').on('change', function () {
var len = jQuery('#frmTest input[type=checkbox]:checked').length;
if (len > 0) {
    $(".css-check").css("background-color", "yellow");
} else if (len === 0) {
    $(".css-check").css("background-color", "pink");
}
}).trigger('change');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="frmTest">
    <input type="checkbox" name="vehicle" value="Car" class="test">I have a car
    <br>
    <input type="checkbox" name="vehicle" value="Car" class="test">I have a bike
    <br>
    <input type="checkbox" name="vehicle" value="Car" class="test">I have nothing
    <br>
</form>
<div class="css-check">TEST</div>

【讨论】：

【解决方案2】：

你应该使用$("#frmTest input[type='checkbox']").change(...)这个事件，比如：

$("#frmTest input[type='checkbox']").change(function(){
if (jQuery('#frmTest input[type=checkbox]:checked').length > 0) {
    $(".css-check").css("background-color", "yellow");
} else {
    $(".css-check").css("background-color", "pink");
}
}).trigger("change");

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="frmTest">
    <input type="checkbox" name="vehicle" value="Car" class="test">I have a car
    <br>
    <input type="checkbox" name="vehicle" value="Car" class="test">I have a bike
    <br>
    <input type="checkbox" name="vehicle" value="Car" class="test">I have nothing
    <br>
</form>
<div class="css-check">TEST</div>

【讨论】：

【解决方案3】：

如果您想要add 或remove CSS 属性，JQuery 函数addClass 和removeClass 可能会派上用场，如下所示：

$("input[type=checkbox]").change(function () {
    if ($('#frmTest input[type=checkbox]:checked').length > 0) {
        $(".css-check").addClass("highlight");
    } else {
        $(".css-check").removeClass("highlight");
    }
});

CSS：

.highlight{
    background-color:red;
}

Here is the JSFiddle demo

您提供的代码示例错过了等待复选框更改的部分，因此您需要在复选框上添加.change(...) 事件：

$("input[type=checkbox]").change(function () {...

上面的代码将css类highlight添加到由css-check标识的元素类IF任何复选框被选中（即被选中的元素长度大于0）。否则，它会从中删除类，因此会删除 CSS 属性。

【讨论】：

【解决方案4】：

您应该在复选框上绑定change 事件，因为marking/unmarking 触发更改事件，您可以使用.trigger(event) 触发应用的特定事件：

$('#frmTest :checkbox').change(function() {
  if (jQuery('#frmTest input[type=checkbox]:checked').length > 0) {
    $(".css-check").css("background-color", "yellow");
  } else {
    $(".css-check").css("background-color", "pink");
  }
}).trigger('change');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="frmTest">
  <input type="checkbox" name="vehicle" value="Car" class="test">I have a car
  <br>
  <input type="checkbox" name="vehicle" value="Car" class="test">I have a bike
  <br>
  <input type="checkbox" name="vehicle" value="Car" class="test">I have nothing
  <br>
</form>
<div class="css-check">TEST</div>

事件可以这样缩短：

$('#frmTest :checkbox').change(function() {
    $(".css-check").css("background-color", function(){
      return jQuery('#frmTest input[type=checkbox]:checked').length > 0 ? "yellow" : "pink";
    });
}).trigger('change');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="frmTest">
  <input type="checkbox" name="vehicle" value="Car" class="test">I have a car
  <br>
  <input type="checkbox" name="vehicle" value="Car" class="test">I have a bike
  <br>
  <input type="checkbox" name="vehicle" value="Car" class="test">I have nothing
  <br>
</form>
<div class="css-check">TEST</div>

【讨论】：

感谢您的帮助:)

【解决方案5】：

请试试这个代码：

<script type="text/javascript">
$(document).ready(function() {
if (jQuery('#frmTest input[type=checkbox]:checked').length > 0) {
    $(".css-check").css("background-color", "yellow");
} else {
    $(".css-check").css("background-color", "pink");
}
$("input[type=checkbox]").change(function () {
if (jQuery('#frmTest input[type=checkbox]:checked').length > 0) {
    $(".css-check").css("background-color", "yellow");
} else {
    $(".css-check").css("background-color", "pink");
}
}); 

}); 
</script>

【讨论】：