jquery if any checkbox is checked

Question

There are many questions regarding checked checkbox , but this is somewhat different.
I want to display a css property if any checkbox is checked by the user. And if the user un-checks all the checkbox that css property should be removed.
I found this code

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>

But this only works when i place checkbox="true".
In Short:
if no checkbox is checked by user , background-color should be pink. And if even one checkbox is checked background-color should be yellow.

Possible duplicate of [jQuery see if any or no checkboxes are selected](https://stackoverflow.com/questions/4086957/jquery-see-if-any-or-no-checkboxes-are-selected) — Ihor Zenich, Oct 11 '17 at 10:54

score 2 · Answer 1 · answered Nov 30 '15 at 11:29

You should be using $("#frmTest input[type='checkbox']").change(...) this event, like:

$("#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>

score 2 · Accepted Answer · answered Nov 30 '15 at 11:30

Try this:

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>

score 2 · Answer 3 · answered Nov 30 '15 at 11:37

If you want to add or remove CSS properties, the JQuery functions addClass and removeClass might come in handy like so:

$("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

The code example that you provided missed the part where it waits for the checkbox changes, therefore you need to add the .change(...) event on the chekboxes:

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

The above code adds the css class highlight to the element identified by css-check class IF any checkbox is checked (that is checked element length is more than 0). Else it removes the class from it, hence, removing the CSS property.

score 2 · Answer 4 · answered Nov 30 '15 at 11:41

You should bind the change event on the checkboxes because marking/unmarking triggers the change event and you can use .trigger(event) to trigger a specific event applied:

$('#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>

Event this can be shorten like this:

$('#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>

Thanks for your help :) – wordpress user Nov 30 '15 at 11:52 — wordpress user, Nov 30 '15 at 11:52

score 0 · Answer 5 · answered Nov 30 '15 at 11:47

Please try this code:

<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>

jquery if any checkbox is checked

5 Answers5