Показать сообщение отдельно
  #67 (permalink)  
Старый 17.10.2019, 09:33
Аватар для Malleys
Профессор
Отправить личное сообщение для Malleys Посмотреть профиль Найти все сообщения от Malleys
 
Регистрация: 20.12.2009
Сообщений: 1,714

Сообщение от laimas
(a.eq(0)[0]==this
Красотища! А говорят, jQuery разработку упрощает!

Aruta, два дня не копался, наверное надо давать понятные имена, а то можно легко запутаться с вашим кодом и всё не понимать, что такое там написано!

Вам такое почему-то запрещено писать? Я имею в виду про то, что вы печатаете много <div>, и ещё обёртки и ещё обёртки...
<details class="upsale_sub_right">
	<summary>
		<input type="checkbox">
		Choose your floor
	</summary>

	<p class="montage_text">intro text</p>
	<div class="floor_items">
		<label>
			<input type="checkbox" name="groundfloor">
			<span class="floor_item_text">Ground floor</span>
		</label>
		<label>
			<input type="checkbox" name="middlefloor">
			<span class="floor_item_text">Second floor</span>
		</label>
		<label>
			<input type="checkbox" name="topfloor">
			<span class="floor_item_text">Third floor</span>
		</label>
		<label>
			<input type="checkbox" name="apartment">
			<span class="floor_item_text">Apartment Building</span>
		</label>
	</div>
</details>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>

$(".upsale_sub_right").on("change", function(event) {
	var inputs = $(this).find("input:not(summary input)");
	var parentInput = $(this).find("summary input");

	if(parentInput.is(event.target)) {
		inputs.prop("checked", parentInput.prop("checked"));
	} else {
		var checkedInputs = inputs.filter(":checked");
		parentInput.prop({
			checked: checkedInputs.length !== 0,
			indeterminate:
				checkedInputs.length !== 0 &&
				inputs.length !== checkedInputs.length
		});
	}

	$(this)
		.find(".floor_items > label.active:has(:not(:checked))").removeClass("active")
		.end()
		.find(".floor_items > label:has(:checked)").addClass("active")
	;
});

</script>

<style>

.floor_items > label {
	display: block;
}

.floor_items > .active {
	background-color: #A5D8E4;
}

</style>

Последний раз редактировалось Malleys, 17.10.2019 в 09:40.
Ответить с цитированием