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 — Ihor Zenich
– Ihor Zenich, Commented Oct 11, 2017 at 10:54

Rayon · Accepted Answer · 2015-11-30 11:30:18Z

2

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>

answered Nov 30, 2015 at 11:30

Rayon

36.6k5 gold badges54 silver badges78 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

void · Accepted Answer · 2015-11-30 11:29:55Z

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>

Ahs N · Accepted Answer · 2015-11-30 11:37:46Z

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.

Jai · Accepted Answer · 2015-11-30 11:41:09Z

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>

Atif Tariq · Accepted Answer · 2015-11-30 11:47:33Z

0

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>

answered Nov 30, 2015 at 11:47

Atif Tariq

2,7701 gold badge31 silver badges35 bronze badges

Collectives™ on Stack Overflow

jquery if any checkbox is checked

5 Answers 5

Comments

Comments

Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related