jquery checkbox parent element css

Question

пытается изменить цвет фона метки, если флажок установлен или не установлен.

примечание: в настоящее время метки фона изменяются при первом щелчке, но после этого он не возвращается к никому или не снимает флажок.

<div class="elemclass"> 
<label for="elem1"><input id="elem1" type="checkbox" class="elembox1" />Checkbox I</label> 
<label for="elem2"><input id="elem2" type="checkbox" class="elembox2" />Checkbox II</label> 
<label for="elem3"><input id="elem3" type="checkbox" class="elembox3" />Checkbox III</label> 
<label for="elem4"><input id="elem4" type="checkbox" class="elembox4" />Checkbox IV</label> 
</div> 
$(document).ready(function() { 
    $('.elemclass > label').live('click', function() 
    { 
    var input = $(this).children('input'); 
    if(input.prop('checked', true)) 
    { 
     $(input).parent().css('background', 'rgb(132,249,144)'); 
    } 
    else 
    { 
     $(input).parent().css('background-color', 'none'); 
    } 
    }); 
}); 

скрипку:

https://jsfiddle.net/kdpg13zw/

Answer 1

Я думаю if(input.prop('checked', true)) это ваша проблема. Лучший способ проверить, установлен ли флажок, - .is(':checked'), на мой взгляд. Вот ваша обновленная скрипка: https://jsfiddle.net/kdpg13zw/3/

$(document).ready(function() { 
 
    $('.elemclass > label').click(function() { 
 
    var input = $(this).children('input'); 
 
    if (input.is(":checked")) { 
 
     $(input).parent().css('background', 'rgb(132,249,144)'); 
 
    } else { 
 
     $(input).parent().css('background-color', ''); 
 
    } 
 
    }); 
 
});

.elemclass > label { 
 
    border-radius: 5px; 
 
    border: 1px solid #cacaca; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="elemclass"> 
 
    <label for="elem1"> 
 
    <input id="elem1" type="checkbox" class="elembox1" />Checkbox I</label> 
 
    <label for="elem2"> 
 
    <input id="elem2" type="checkbox" class="elembox2" />Checkbox II</label> 
 
    <label for="elem3"> 
 
    <input id="elem3" type="checkbox" class="elembox3" />Checkbox III</label> 
 
    <label for="elem4"> 
 
    <input id="elem4" type="checkbox" class="elembox4" />Checkbox IV</label> 
 
</div>

Пожалуйста, обратите внимание, что background-color: none не работает везде (например, он не работает на код просмотре StackOverflow, как вы можете видеть в Азим-х ответ, зеленый не уйдет ;-)). Вы лучше с css('background-color', '')

Answer 2

Вы можете сделать это, как следующее в случае изменения в :checkbox.

$('.elemclass :checkbox').change(function() { 
 
    if (this.checked) { 
 
    $(this).parent().css('background', 'rgb(132,249,144)'); 
 
    } else { 
 
    $(this).parent().css('background', 'none'); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="elemclass"> 
 
    <label for="elem1"> 
 
    <input id="elem1" type="checkbox" class="elembox1" />Checkbox I</label> 
 
    <label for="elem2"> 
 
    <input id="elem2" type="checkbox" class="elembox2" />Checkbox II</label> 
 
    <label for="elem3"> 
 
    <input id="elem3" type="checkbox" class="elembox3" />Checkbox III</label> 
 
    <label for="elem4"> 
 
    <input id="elem4" type="checkbox" class="elembox4" />Checkbox IV</label> 
 
</div>

Answer 3

это будет SLOVE вашей проблемы ..

$(document).ready(function() { 
 
    $('.elemclass > label').on('click', function() { 
 
    var input = $(this).children('input'); 
 
    if ($(input).prop('checked') == true) { 
 
     $(input).parent().css('background', 'rgb(132,249,144)'); 
 
    } else { 
 
     $(input).parent().css('background-color', 'none'); 
 
    } 
 
    }); 
 
});

.elemclass > label { 
 
    border-radius: 5px; 
 
    border: 1px solid #cacaca; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
 
<div class="elemclass"> 
 
    <label for="elem1"> 
 
    <input id="elem1" type="checkbox" class="elembox1" />Checkbox I</label> 
 
    <label for="elem2"> 
 
    <input id="elem2" type="checkbox" class="elembox2" />Checkbox II</label> 
 
    <label for="elem3"> 
 
    <input id="elem3" type="checkbox" class="elembox3" />Checkbox III</label> 
 
    <label for="elem4"> 
 
    <input id="elem4" type="checkbox" class="elembox4" />Checkbox IV</label> 
 
</div>