javascript - jquery onclick 按钮更改选中/取消选中操作旁边的元素背景

Question

下面的代码使得每次单击时都会选中/取消选中所有未禁用的复选框。此外，第一次单击复选框时， parent 的背景会变为红色。

var clicked = false;
    var target = jQuery(".editcheckhour:not(:disabled)");
    jQuery(".checkalledit").click(function() {
    target.prop("checked", !clicked).closest('label').css('background-color','#c00');
    clicked = !clicked;
});     

下次单击时我想改回背景颜色。因此，该函数不仅会检查/取消选中输入，还会交替更改复选框父背景。

在此 JSFIdle 演示中，只需首先单击更改背景。

https://jsfiddle.net/xLg7eszb/1/

有人帮我做这个吗？

Answer 1

尝试使用toggleClass()

var clicked = false;
var target = jQuery(".editcheckhour:not(:disabled)");
jQuery(".checkalledit").click(function() {
  target.prop("checked", !clicked).closest('label').toggleClass('bgcolor');
  clicked = !clicked;
});

label {
  background-color: #558;
  color: white;
  padding: 5px 12px;
}
label > input:disabled {
  opacity: 0.5
}
button {
  display: block;
  margin-top: 20px;
}
.bgcolor {
  background-color: #c00;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<label>
  <input class="editcheckhour" type="checkbox">onet</label>
<label>
  <input disabled class="editcheckhour" type="checkbox">two</label>
<label>
  <input class="editcheckhour" type="checkbox">three</label>
<label>
  <input class="editcheckhour" type="checkbox">four</label>

<button type="button" class="checkalledit">on / off</button>