javascript - jquery if any checkbox is checked - Stack Overflow

admin管理员组

文章数量:1300164

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=".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>

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

• javascript
• jquery
• html
• checkbox

Share Improve this question Follow asked Nov 30, 2015 at 11:26 wordpress userwordpress user 58477 silver badges2727 bronze badges 2

• When does the code at top get executed? – Arg0n Commented Nov 30, 2015 at 11:30
• Possible duplicate of jQuery see if any or no checkboxes are selected – Ihor Zenich Commented Oct 11, 2017 at 10:54

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 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./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>

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

If you want to add or remove CSS properties, the JQuery functions addClass and removeClass might e 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.

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

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>

本文标签： javascriptjquery if any checkbox is checkedStack Overflow