Question

尝试更改标签背景颜色，具体取决于是否选中了复选框内部。

注意：当前标签背景会在第一次点击时发生变化，但之后不会更改为无或取消选中框。

<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');
    }
    });
});

小提琴：

https://jsfiddle.net/kdpg13zw/

Answer 1

您可以在: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>

Answer 2

我认为if(input.prop('checked', true))是你的问题。在我看来，检查是否选中复选框的最佳方法是.is(':checked')。这是您更新的小提琴：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>

请注意background-color: none无法在任何地方使用（例如，它无法在StackOverflow代码预览中使用，正如您在Azim的答案中看到的那样，绿色不会消失;-)）。你最好使用css('background-color', '')

Answer 3

这将解决你的问题..

$(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>

jquery复选框父元素css

3 个答案: