CODEWITHSUNDEEP
javascriptjqueryhtmlcheckbox
wordpress user
wordpress user

Reputation: 584

jquery if any checkbox is checked

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.

Upvotes: 1

Views: 7642

Answers (5)

Atif Tariq
Atif Tariq

Reputation: 2772

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>

Upvotes: 0

Jai
Jai

Reputation: 74738

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>

Upvotes: 2

Ahs N
Ahs N

Reputation: 8366

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.

Upvotes: 2

Rayon
Rayon

Reputation: 36609

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>

Upvotes: 2

void
void

Reputation: 36703

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>

Upvotes: 2

Related Questions