Как при помощи jquery проверять состояние чекбокса и стилизовать label?

Question

[Дмитрий Иноземцев]

Приветствую, друзья. Есть такой код:

<div class = "group_wrapper">
	<div class = "label_wrapper">
		<label for = "one">Заголовок</label>
	</div>
	<div class = "checkbox_wrapper">
		<input type = "checkbox" id = "one" name = "one">
	</div>
</div>

<div class = "group_wrapper">
	<div class = "label_wrapper">
		<label for = "two">Заголовок</label>
	</div>
	<div class = "checkbox_wrapper">
		<input type = "checkbox" id = "two" name = "two">
	</div>
</div>

<div class = "group_wrapper">
	<div class = "label_wrapper">
		<label for = "three">Заголовок</label>
	</div>
	<div class = "checkbox_wrapper">
		<input type = "checkbox" id = "three" name = "three">
	</div>
</div>

Стоят следующие задачи:
1)Стилизовать label по клику (галочка есть - добавить класс, галочка снята - убрать);
2)После перезагрузки страницы проверять, стоит ли галочка и, опять же, добавлять класс, если стоит.

С jQuery не дружу, а дело горит. Заранее большое спасибо за помощь.

Answer 1

[Aleksandr]

На скорую руку, для себя отредактируйте
https://jsfiddle.net/aL2pj23h/1/

Comments

[Ivan Demidov]

https://jsfiddle.net/aL2pj23h/2/

[Дмитрий Иноземцев]

Спасибо! Но основной нюанс всё же такой: когда форма отправляется, страница перезагружается, и стилизация и классы слетаютт. Хотелось бы понять, как сделать проверку при загрузке страницы. Если этот конкретный чекбокс отмечен, отметить его лейбл классом.

[Aleksandr]

Дмитрий Март: используйте https://github.com/js-cookie/js-cookie

Answer 2

[Дмитрий Новиков]

$("input").each(function() { //проверка после перезагрузки
if($(this).prop("checked")){
$(this).closest('.group_wrapper').find('label').addClass('active');
} else {
$(this).closest('.group_wrapper').find('label').removeClass('active');
}
});

$("input").change(function() { //по клику
if($(this).prop("checked")){
$(this).closest('.group_wrapper').find('label').addClass('active');
} else {
$(this).closest('.group_wrapper').find('label').removeClass('active');
}
});

Comments

[Дмитрий Иноземцев]

Спасибо за ответ!
Запустить никак не могу. По клику работает, после отправки формы слетает :(