How to change background color if checkbox is checked, selected by id

Question

When a particular checkbox is selected I am trying to change its color. I tried doing this solely by making use of CSS, however this will result in the changing of colors for all <div> elements.

Most of the CSS I used is from Material Design. I tried to add my own custom class:

$('#wrong').change(function() {
  if (this.checked) {
    $('.check').addClass('red');
  } else {
    $('.check').removeClass('red');
  }
});

$('#wrong').change(function() {
  if ($(this).is(":checked")) {
    $('.check').addClass('red');
  } else {
    $('.check').removeClass('red');
  }
});

.form-check .form-check-sign .check {
  position: relative;
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 1px solid rgba(0, 0, 0, .54);
  overflow: hidden;
  z-index: 1;
  border-radius: 3px;
}

.form-check .form-check-sign .check:before {
  position: absolute;
  content: "";
  transform: rotate(45deg);
  display: block;
  margin-top: -3px;
  margin-left: 7px;
  width: 0;
  color: #fff;
  height: 0;
  box-shadow: 0 0 0 0, 0 0 0 0, 0 0 0 0, 0 0 0 0, 0 0 0 0, 0 0 0 0, 0 0 0 0 inset;
  animation: checkboxOff 0.3s forwards;
}

.form-check .form-check-input:focus+.form-check-sign .check:after {
  opacity: 0.2;
}

.form-check .form-check-input:checked+.form-check-sign .check {
  background: #00BCD4;
}

.form-check .form-check-input:checked+.form-check-sign .check .red {
  background: #FF0000;
}

.red {
  background: #FF0000;
  opacity: 0.5;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-check">
  <label class="form-check-label">
    <input class="form-check-input" type="checkbox" id="wrong" name="wrong" disabled value="1"'.$checkederr.'>
    <span class="form-check-sign">
    <span class="check"></span>
    </span>
  </label>
</div>

Somehow all checkboxes and <span> elements (containing the .chek class) are selected in red.

The code php for '.$checkederr.' is:

while($row == $querydoc -> fetch(PDO::FETCH_ASSOC))
{
  ...
  if($row['errato'] == 1)
    $checkederr="checked";
  else
    $checkederr="";
}

Adding a class in a given <span> tag like "check red" only allows for the opposite that I want.

This doesn’t need JavaScript in the first place. `.form-check-input:checked + .form-check-sign .check { color: red; }` — 04FS, Apr 29 '19 at 07:34
Why do you want to use PHP for that? Shouldn't this be handled in the browser alone? — Nico Haase, Apr 29 '19 at 07:38
One of your `if-statements` within your JavaScript contains an extra bracket which you should not use (causing an error). — Barrosy, Apr 29 '19 at 07:53
Possible duplicate of [css - Why Cannot Change Checkbox Color Whatever I Do?](https://stackoverflow.com/questions/24322599/css-why-cannot-change-checkbox-color-whatever-i-do) — Barrosy, Apr 29 '19 at 07:59

score 0 · Answer 1 · edited Apr 29 '19 at 07:47

Input checkbox should be like this, check checkederr how I am using.

<input class="form-check-input" type="checkbox" id="wrong" name="wrong" value="1{$checkederr}">

remove the disabled from the input.

3.You have the 2 openening braces here if($(this).is(":checked")) { { they should be if($(this).is(":checked")) {

Error Free Code:- (Include the CSS at the bottom)

$('#wrong').change(function() {
  if (this.checked) {
    $('.check').addClass('red');
  } else {
    $('.check').removeClass('red');
  }
});

$('#wrong').change(function() {
  if ($(this).is(":checked")) {
    $('.check').addClass('red');
  } else {
    $('.check').removeClass('red');
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-check">
  <label class="form-check-label">
    <input class="form-check-input" type="checkbox" id="wrong" name="wrong" value="1{$checkederr}">
    <span class="form-check-sign">
      <span class="check"></span>
    </span>
  </label>
</div>

Why did you add two times a piece of JavaScript code that does exactly the same, because of explanation purpose? — Barrosy, Apr 29 '19 at 07:49
@Barrosy The OP is using this code, I was not gone through the purpose of the code, i just found the error and reported, you can suggest the better solution — Rakesh Jakhar, Apr 29 '19 at 07:50

Barrosy · Answer 2 · 2019-04-29T11:34:04.850

I thought your question to be a duplicate, but when re-writing your question I noticed that you are using a seperate element to fill in the color.

$('#wrong').change(function() {
  //Simply toggle the class with jquery's "$.toggleClass()" method
  $(".check").toggleClass("red");
});

.form-check .form-check-sign .check {
  position: relative;
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 1px solid rgba(0, 0, 0, .54);
  overflow: hidden;
  z-index: 1;
  border-radius: 3px;
}

.form-check .form-check-sign .check:before {
  position: absolute;
  content: "";
  transform: rotate(45deg);
  display: block;
  margin-top: -3px;
  margin-left: 7px;
  width: 0;
  color: #fff;
  height: 0;
  box-shadow: 0 0 0 0, 0 0 0 0, 0 0 0 0, 0 0 0 0, 0 0 0 0, 0 0 0 0, 0 0 0 0 inset;
  animation: checkboxOff 0.3s forwards;
}

.form-check .form-check-input:focus+.form-check-sign .check:after {
  opacity: 0.2;
}

.form-check .form-check-input:checked+.form-check-sign .check {
  background: #00BCD4;
}

/* Removed the space between .check and .red */
.form-check .form-check-input:checked+.form-check-sign .check.red {
  background: #FF0000;
}

.red {
  background: #FF0000;
  opacity: 0.5;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-check">
  <label class="form-check-label">
    <!-- Removed disabled state from the input below -->
    <!-- With PHP: -->
    <!--<input class="form-check-input" type="checkbox" id="wrong" name="wrong" value="1" <?php echo $checkederr;?> >-->
    <!-- Or you could echo the entire element within PHP: -->
    <!--<?php
      echo "<input class='form-check-input' type='checkbox' id='wrong' name='wrong' value='1' " . $checkederr . ">";
    ?>-->
    <!-- Without PHP: -->
    <input class="form-check-input" type="checkbox" id="wrong" name="wrong" value="1">
    <span class="form-check-sign">
    <span class="check"></span>
    </span>
  </label>
</div>

There are different approaches to get this done, but this would be a simple example. Please let me know if you need any more help.

How to change background color if checkbox is checked, selected by id

2 Answers2