在更改事件在jQuery的

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

我加入觸發事件。如果使用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 
} 

$(document).ready(function() { 
 
\t 
 
    
 
\t $('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) { 
 
\t checkboxes = document.getElementsByName('time'); 
 
\t for(var i in checkboxes) 
 
\t \t 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);}

<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) { 
 
\t checkboxes = document.getElementsByName('time'); 
 
\t for(var i in checkboxes) 
 
\t \t checkboxes[i].checked = source.checked; 
 
} 
 
</script>

Answer 2

的問題是，因爲你需要上的複選框觸發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 3

您需要觸發這種改變函數內環路

$(document).ready(function() { 
 
    $('input:checkbox[name="time"]').change(function() { 
 
    $('input:checkbox[name="time"]').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); 
 
}

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