jQuery if checkbox checked and then change the background colour

Question

How to change the background colour on the checkbox if it is checked.

HTML

 <input type="checkbox" name="somename" id="thisid" checked="checked">

JQuery

 if ($("input[type=checkbox]").is(':checked')){
       $("input[type=checkbox]").css('background','red');
   }

Ideal would be to change the background color on load. Can anybody help me with this?

Possible duplicate of [How to check whether a checkbox is checked in jQuery?](https://stackoverflow.com/questions/901712/how-to-check-whether-a-checkbox-is-checked-in-jquery) — freedomn-m, May 21 '19 at 14:17
So what problem are you actually having? Checking if the checkbox is checked, or changing the background color of the checkbox, which is usually something you don't see — j08691, May 21 '19 at 14:19
check this https://stackoverflow.com/questions/34388696/how-to-change-the-background-color-on-a-input-checkbox-with-css — Vikram Singh, May 21 '19 at 14:20
Check boxes, by default, will have no change in appearance when you change the background colour. — Kobe, May 21 '19 at 14:23
Possible duplicate of [how to change the background color of checkbox?](https://stackoverflow.com/questions/25758376/how-to-change-the-background-color-of-checkbox) — Rahul Singh, May 21 '19 at 14:45

Soviut · Answer 1 · 2019-05-21T21:14:36.067

Your code is fine. This is most likely not working on load because you haven't wrapped the code in a "ready" function. To then change the background colour of the checkboxes that are checked, you need to chain the css onto your query.

// this wrapper waits until the DOM has loaded before executing the code inside
$(function() {
  $("input[type=checkbox]:checked").css('background-color', 'red')
})

If you were expecting the background colour to change as you toggle the checkboxes, you'll need to set up an event as well.

// this wrapper waits until the DOM has loaded before executing the code inside
$(function() {
  var checkboxes = $("input[type=checkbox]")

  // set the styles based on the initial state on load
  checkboxes.is(':checked').css('background-color', 'red')

  // update the styles as the checkbox states are changed
  checkboxes.on('change', function() {
    var checkbox = $(this)

    checkbox.css('background-color', checkbox.is(':checked') ? 'red' : 'transparent'))
  })
})

input[type='checkbox'] {
  -webkit-appearance: none; /* necessary to override checkbox styles on OSX and iOS */
  width: 20px;
  height: 20px;
  background: grey;
}

input[type='checkbox']:checked {
  background: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<input type="checkbox">
<input type="checkbox" checked>
<input type="checkbox">
<input type="checkbox" checked>
<input type="checkbox">

NOTE: Checkboxes and radios have hard coded styles in many browsers on iOS and OSX. In order to explicitly override this, you need to use the appearance: none (in this case -webkit-appearance for Chrome and Safari) to allow your styles to override the browser defaults.

This code adds background color to all checboxes, but it should add only to checked="checked" — jomskris, May 21 '19 at 14:23
https://jsfiddle.net/ruhbqw0m/1/ Here is your code, it doesn't apply background color. — jomskris, May 21 '19 at 20:46
@jomskris did you check the console for errors? I had a typo; a missing `)`. I've updated my answer with a running solution. — Soviut, May 21 '19 at 21:15

score 0 · Answer 2 · answered May 21 '19 at 14:23

If you want to style your checkbox (or an associated label) depending on whether it is checked or not, you can use the CSS pseudo class :checked

input[type=checkbox] {
    /** Style for unchecked **/

} 
input[type=checkbox]:checked {
    /** Style for checked **/
}

However, checkboxes in browsers usually are not stylable this way. You have to replace them with pseudo checkboxes, i.e., custom elements that just look like a checkbox while hiding the actual checkbox.

Maybe take a look here.

score 0 · Answer 3 · answered May 21 '19 at 14:37

0

Make sure you are doing once the dom is ready. Just loop through them and check.

$(function() {
    $("input[type=checkbox]").each({
        if($(this).is(':checked')) {
            $(this).css('background-color', 'red');
         }
    });
})

answered May 21 '19 at 14:37

Linga

10,379
10
52
104

jQuery if checkbox checked and then change the background colour

3 Answers3