On jQuery

Question

öğesinde değişiklik etkinleştirme Tek onay kutusunu tıklattığımda, değiştirir ve yeşil renklidir. Ancak Tam gün kontrol ettiğimde tüm onay kutuları işaretlenir ancak renk değişmez. Ayrıca tam Gün'ü kontrol ettikten sonra, tüm gün kontrolünün tamamının işaretini kaldırırım. Takılıyorum, bu kodun nesi yanlış?

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

ben tetikleyici olayı ekledi. JS kullanarak onay kutusunu işaretlerseniz, etkinliği değiştirmeyin. Kendi olay işleyicisi çalışır ve bunların arka plan rengini değiştirir, böylece 'Tümünü Seç' seçeneğini tıkladığınızda Kutuları bir change olayı tetiklemek gerekiyor çünkü

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

konu

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 
} 

olduğunu . Bu, checked durumunu el ile ayarlarken oluşmaz, bu nedenle kodunuzdaki trigger() yöntemini kullanabilirsiniz. Ancak, toggleClass() kullanarak mantığınızı geliştirebileceğiniz ve aynı zamanda eskitikleri için on* olay özniteliğini kaldırabileceğinizi de not etmelisiniz. Normal onay kutuları için yaptığınız gibi göze batmayan bir olay işleyici kullanın. Bu deneyin:

$('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

Sen döngü içinde

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