关于在jQuery中工作的Change事件

Question

当我单击单个复选框时,它会更改并变为绿色.但是当我检查全天时,会检查所有复选框,但颜色不会改变.检查完整一天后,我取消选中所有仍然全天检查.我被困了,这段代码出了什么问题？

$(document).ready(function() {


  $('input:checkbox[name="time"]').change(function() {
    $('input:checkbox[name="time"]:not(:checked)').parent().removeClass("active");
    $('input:checkbox[name="time"]:checked').parent().addClass("active");
  });
});

function selectAll(source) {
  checkboxes = document.getElementsByName('time');
  for (var i in checkboxes)
    checkboxes[i].checked = source.checked;
}

.timing {
  width: 500px;
}

.timing label {
  width: 100px;
  display: inline-block;
  border: 1px solid #ccc;
  padding: 10px;
  text-align: center;
  cursor: pointer;
}

.timing label input {
  display: block;
}

.timing label.active {
  background-color: rgba(0, 204, 0, 1);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="timing">
  <label for="11:30"><input name="time" class="timess" value="11:30" id="11:30" type="checkbox">11:30</label>
  <label for="12:00"><input name="time" class="timess" value="12:00" id="12:00" type="checkbox">12:00</label>
  <label for="12:30" class=""><input name="time" class="timess" value="12:30" id="12:30" type="checkbox">12:30</label>
</div>



<label for="selectall"><input type="checkbox" id="selectall" onClick="selectAll(this)" />Full Day</label>

<script>
  function selectAll(source) {
    checkboxes = document.getElementsByName('time');
    for (var i in checkboxes)
      checkboxes[i].checked = source.checked;
  }
</script>

Answer 1

问题是因为您需要change在单击"全选"选项时触发复选框上的事件,以便他们自己的事件处理程序运行并更改其背景颜色.checked手动设置状态时不会发生这种情况,因此您可以trigger()在代码中使用该方法.

您应该注意,您可以通过使用toggleClass()并删除on*事件属性来改进逻辑,因为它们已过时.像普通复选框一样使用不显眼的事件处理程序.试试这个:

$('input:checkbox[name="time"]').change(function() {
  $(this).closest('label').toggleClass('active', this.checked);
});

$('#selectall').change(function() {
  $('input:checkbox[name="time"]').prop('checked', this.checked).trigger('change');
});

.timing {
  width: 500px;
}

.timing label {
  width: 100px;
  display: inline-block;
  border: 1px solid #ccc;
  padding: 10px;
  text-align: center;
  cursor: pointer;
}

.timing label input {
  display: block;
}

.timing label.active {
  background-color: rgba(0, 204, 0, 1);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="timing">
  <label for="11:30">
    <input name="time" class="timess" value="11:30" id="11:30" type="checkbox">
    11:30
  </label>
  <label for="12:00">
    <input name="time" class="timess" value="12:00" id="12:00" type="checkbox">
    12:00
  </label>
  <label for="12:30">
    <input name="time" class="timess" value="12:30" id="12:30" type="checkbox">
    12:30
  </label>
</div>

<label for="selectall">
  <input type="checkbox" id="selectall" />
  Full Day
</label>

Answer 2

我添加了触发事件。如果您使用 JS 选中复选框，则不会触发更改事件。

function selectAll(source) {
    checkboxes = document.getElementsByName('time');
    for(var i in checkboxes)
        checkboxes[i].checked = source.checked;
        $('input:checkbox[name="time"]').trigger('change');//Trigger change event to checkbox
}

function selectAll(source) {
    checkboxes = document.getElementsByName('time');
    for(var i in checkboxes)
        checkboxes[i].checked = source.checked;
        $('input:checkbox[name="time"]').trigger('change');//Trigger change event to checkbox
}

$(document).ready(function () {
	
 
	$('input:checkbox[name="time"]').change(function () {
        $('input:checkbox[name="time"]:not(:checked)').parent().removeClass("active");
        $('input:checkbox[name="time"]:checked').parent().addClass("active");
    });    
});

function selectAll(source) {
	checkboxes = document.getElementsByName('time');
	for(var i in checkboxes)
		checkboxes[i].checked = source.checked;
        $('input:checkbox[name="time"]').trigger('change')
}

.timing{width:500px;}
.timing label{width:100px;display:inline-block;border:1px solid #ccc;padding:10px;text-align:center;cursor:pointer;}
.timing label input{display:block;}
.timing label.active{background-color:rgba(0,204,0,1);}