jQuery是否选中任何复选框

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.

Answer 1

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> 

Answer 2

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> 

Answer 3

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.

Answer 4

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> 

Answer 5

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>