Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Работа с чекбоксами (https://javascript.ru/forum/dom-window/82191-rabota-s-chekboksami.html)

ureech 29.03.2021 16:27

Работа с чекбоксами
 
Привет.
<div id="users-div-select" display-none "></div>

<div><input id="check_all" type="checkbox"  value=""  /></div>

<div>
<input type="checkbox" class="user_check" value="1"  />
<input type="checkbox" class="user_check" value="1"  />
<input type="checkbox" class="user_check" value="1"  />
</div>

Тут по клику на любой из трёх чекбоксов или показывается первый блок или,при снятии,скрывается .
$('.user_check').on('change', function () {		
		var a = document.querySelector(".user_check:checked");
		if(a){
		$('#users-div-select').fadeIn().show();
		}
		else
		{
		$('#users-div-select').fadeOut(300);
		}		
		});

Тут отмечаются сразу три чекбокса и при этом тоже показывается первый див, но при снятии мне никак не скрыть первый блок.
var checkbox = $(".user_check"),
    boxCnt = checkbox.length,
    allcheckbox = $("#check_all");
	allcheckbox.on('change',function () {
		checkbox.prop("checked", $(this).is(":checked"));
		$('#users-div-select').fadeIn().show();
		
	});
	checkbox.on('change', function(){
		allcheckbox.prop("checked", $('.checkbox:checked').length == boxCnt);

	});

Прошу подсказать.

рони 29.03.2021 16:45

ureech,
:-?

рони 29.03.2021 17:01

ureech,
<!DOCTYPE html>
<html>

<head>
    <title>Untitled</title>
    <meta charset="utf-8">
    <style type="text/css">
        #users-div-select {
            display: none;
        }
    </style>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script>
        $(function() {
            var checkbox = $(".user_check"),
                boxCnt = checkbox.length,
                allcheckbox = $("#check_all");
            allcheckbox.on('change', function() {
                checkbox.prop("checked", this.checked);
                $('#users-div-select').toggle(this.checked);
            });
            checkbox.on('change', function() {
                allcheckbox.prop("checked", $('.user_check:checked').length == boxCnt);
                $('#users-div-select').toggle(!!$('.user_check:checked').length);
            });
        });
    </script>
</head>

<body>
    <div id="users-div-select">users-div-select</div>
    <label><input id="check_all" type="checkbox" value="" />All</label>
    <div>
        <input type="checkbox" class="user_check" value="1" />
        <input type="checkbox" class="user_check" value="1" />
        <input type="checkbox" class="user_check" value="1" />
    </div>
</body>

</html>

ureech 29.03.2021 17:21

рони, :(
Последнее время весь в php). Забыл сиё чудо js-toggle(); Спасибо).

ureech 29.03.2021 17:25

P.S. И так по отдельности не открывает див.

рони 29.03.2021 18:21

ureech,
???

ureech 29.03.2021 21:09

Ну если я выбираю не "отметить всё", а один из трёх чекбоксов, то блок не открывается.

рони 29.03.2021 21:23

ureech,
#3 строка 24

ureech 29.03.2021 21:53

Спаибо. Завтра разберу код. Сегодня уже голова не варит).

ureech 29.03.2021 21:54

И оффтоп. Есть ли тут ссылка, по которой я могу все свои темы посмотреть.?


Часовой пояс GMT +3, время: 17:09.