Question

我正在寻找一种方法来更改div背景颜色，它是复选框的父级。但是我只希望它在标签内的'checked'属性时更改背景颜色。

HTML

<div class="company">
        <input type="checkbox" name="Selected[]" class="checkboxC" value="8" checked>
             Company 8
</div>
<div class="company">
        <input type="checkbox" name="Selected[]" class="checkboxC" value="9">
             Company 9
</div>

所以在上面的例子中，我只想要带有复选框8的div来改变背景颜色。 9保留默认颜色。我也无法对name属性做任何事情，因为这是由PHP采取的。有关如何使用Javascript / jQuery解决此问题的任何帮助？

Answer 1

一旦文档准备就绪，您可以使用jQuery更新所有检查输入的父背景颜色：

$(function () {
    $('input:checked').parent().css('background-color', 'red');
});

查看demo

Answer 2

您可以更改<div>的背景颜色，如下所示：

HTML：

<!-- Square Div -->
<div class='square-div'>
  <!-- Checkbox -->
  <input id="checkbox" type='checkbox' /> Toggle Color
</div>

jQuery：

$('#checkbox').on('click', () => {
     var squareDiv = $('.square-div');
   if ( $('#checkbox').is(':checked') ) {
     squareDiv.addClass('square-div-red');
   } else {
     squareDiv.removeClass('square-div-red');
   }
});

CSS：

.square-div {
  background: green;
  height: 200px;
  width: 200px;
}

/* Class to be toggled on checkbox status */
.square-div-red {
  background-color: red;
}

您可以找到一个代码工作示例 here

如果选中复选框，则更改div背景颜色

2 个答案: