jquery onclick 按钮更改 check/uncheck 操作旁边的元素背景

Question

下面的代码使得每次单击时所有未禁用的复选框都是 checked/unchecked。同样在第一次单击时，复选框 parents 的背景变为红色。

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

下次点击时我想改回背景颜色。因此该函数不仅会 check/uncheck 输入，还会交替更改复选框 parents 背景。

在此 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>

Answer 2

很简单。添加一个 class 到代码中的 default 标签，并在 css 文件中将 class 定义为默认颜色。

<label><input class="editcheckhour defaultColor"  type="checkbox"> onet</label>
<label><input disabled class="editcheckhour defaultColor"  type="checkbox"> two</label>
<label><input class="editcheckhour defaultColor"  type="checkbox"> three</label>
<label><input class="editcheckhour defaultColor"  type="checkbox"> four</label>

默认颜色 class 会像 css 一样

defaultColor {
 background-color: #558;
  }

又一个新颜色就是这样的红色

newColor {
     background-color: red;
   }

单击按钮只需删除 class 并将 class 添加到按钮状态的标签中。要保持按钮状态，请将代码编写为：

<button type="button" class="checkalledit" data-status="0">on / off</button>

点击后会先改变标签背景，再改变自身状态

jQuery(".checkalledit").click(function() {
var status = $(this).attr("data-status");
if(status == 0){
target.prop("checked", !clicked).closest('label').removeClass("defaultColor");
target.prop("checked", !clicked).closest('label').addClass("newColor");
$(this).attr("data-status","1");
  }
  else{
  target.prop("checked", !clicked).closest('label').removeClass("newColor");
   target.prop("checked", !clicked).closest('label').addClass("defaultColor");
$(this).attr("data-status","0");
  }
  });

jquery onclick 按钮更改 check/uncheck 操作旁边的元素背景

jquery onclick button change element background next to check/uncheck action

javascript

jquery

buttonclick