jquery onclick кнопка изменения элемента фона рядом с отметкой/снятием флажка

Question

Приведенный ниже код устанавливает, что на каждом клике все флажки, которые не отключены, отмечены или сняты. Также на первом щелчке фона chackboxes родители chanhging к красному.

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>

Answer 2

Его просто. Добавьте один класс для маркировки по умолчанию в свой код и определите этот класс как цвет по умолчанию в вашем файле css.

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

defaultColor класс будет в CSS, как

defaultColor { 
background-color: #558; 
    } 

еще один новый цвет будет красным, как это.

newColor { 
    background-color: red; 
    } 

При нажатии кнопки просто удалите класс и добавьте класс в метки на статус кнопки. Для сохранения состояния кнопки введите код:

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