jquery checkbox parent element css

Question

trying to change label background color depending if checkbox inside is checked or not checked.

note: currently label background changes on first click, but after that it does not change back to none or uncheck box.

<div class="elemclass">
<label for="elem1"><input id="elem1" type="checkbox" class="elembox1" />Checkbox I</label>
<label for="elem2"><input id="elem2" type="checkbox" class="elembox2" />Checkbox II</label>
<label for="elem3"><input id="elem3" type="checkbox" class="elembox3" />Checkbox III</label>
<label for="elem4"><input id="elem4" type="checkbox" class="elembox4" />Checkbox IV</label>
</div>
$(document).ready(function() {
  $('.elemclass > label').live('click', function()
  {
    var input = $(this).children('input');
    if(input.prop('checked', true))
    {
      $(input).parent().css('background', 'rgb(132,249,144)');
    }
    else
    {
      $(input).parent().css('background-color', 'none');
    }
    });
});

fiddle:

https://jsfiddle.net/kdpg13zw/

label back ground is changing in jsfiddle example. right?? don't understand what is the problem here. — e11438
– e11438, Commented Mar 3, 2016 at 12:27
If your demo code – the code you supplied to reproduce your problem – works as you say you want it to, you need to very clearly explain the problem you're having elsewhere. But, given that code works your problem isn't with that code. — David Thomas
– David Thomas, Commented Mar 3, 2016 at 12:30
that fiddle does not work if u try it, it does not change background back to white or uncheck box — Diamonte
– Diamonte, Commented Mar 3, 2016 at 12:31

Ibrahim Khan · Accepted Answer · 2016-03-03 12:50:54Z

2

You can do it like following in the change event of :checkbox.

$('.elemclass :checkbox').change(function() {
  if (this.checked) {
    $(this).parent().css('background', 'rgb(132,249,144)');
  } else {
    $(this).parent().css('background', 'none');
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="elemclass">
  <label for="elem1">
    <input id="elem1" type="checkbox" class="elembox1" />Checkbox I</label>
  <label for="elem2">
    <input id="elem2" type="checkbox" class="elembox2" />Checkbox II</label>
  <label for="elem3">
    <input id="elem3" type="checkbox" class="elembox3" />Checkbox III</label>
  <label for="elem4">
    <input id="elem4" type="checkbox" class="elembox4" />Checkbox IV</label>
</div>

edited Mar 3, 2016 at 12:50

answered Mar 3, 2016 at 12:26

Ibrahim Khan

20.8k7 gold badges46 silver badges57 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Laurens Swart · Accepted Answer · 2016-03-03 12:29:35Z

1

I think if(input.prop('checked', true)) is your problem. The best way to check if a checkbox is checked is .is(':checked') in my opinion. Here's your updated fiddle: https://jsfiddle.net/kdpg13zw/3/

$(document).ready(function() {
  $('.elemclass > label').click(function() {
    var input = $(this).children('input');
    if (input.is(":checked")) {
      $(input).parent().css('background', 'rgb(132,249,144)');
    } else {
      $(input).parent().css('background-color', '');
    }
  });
});

.elemclass > label {
  border-radius: 5px;
  border: 1px solid #cacaca;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="elemclass">
  <label for="elem1">
    <input id="elem1" type="checkbox" class="elembox1" />Checkbox I</label>
  <label for="elem2">
    <input id="elem2" type="checkbox" class="elembox2" />Checkbox II</label>
  <label for="elem3">
    <input id="elem3" type="checkbox" class="elembox3" />Checkbox III</label>
  <label for="elem4">
    <input id="elem4" type="checkbox" class="elembox4" />Checkbox IV</label>
</div>

Please note that background-color: none doesn't work everywhere (for example, it doesn't work on the StackOverflow code preview, as you can see in Azim's answer, the green won't go away ;-)). You're better off with css('background-color', '')

answered Mar 3, 2016 at 12:29

Laurens Swart

1,2491 gold badge11 silver badges24 bronze badges

1 Comment

Diamonte Over a year ago

I accepted your answer because more details, thought @Viku had as much correct answer. Just a note, I'm using .live('click' because this is inside bootstrap modal and noted there is problems when using .click(, this is other topic anyway...

ViKu · Accepted Answer · 2016-03-03 12:34:23Z

This will slove your problem..

$(document).ready(function() {
  $('.elemclass > label').on('click', function() {
    var input = $(this).children('input');
    if ($(input).prop('checked') == true) {
      $(input).parent().css('background', 'rgb(132,249,144)');
    } else {
      $(input).parent().css('background-color', 'none');
    }
  });
});

.elemclass > label {
  border-radius: 5px;
  border: 1px solid #cacaca;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="elemclass">
  <label for="elem1">
    <input id="elem1" type="checkbox" class="elembox1" />Checkbox I</label>
  <label for="elem2">
    <input id="elem2" type="checkbox" class="elembox2" />Checkbox II</label>
  <label for="elem3">
    <input id="elem3" type="checkbox" class="elembox3" />Checkbox III</label>
  <label for="elem4">
    <input id="elem4" type="checkbox" class="elembox4" />Checkbox IV</label>
</div>

Collectives™ on Stack Overflow

jquery checkbox parent element css

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related