Javascript кнопка выбрать все

Как сделать — Кликабельный выпадающий список

Узнать, как создать интерактивное выпадающее меню с помощью CSS и JavaScript.

Выпадающий

Выпадающее меню — это переключаемое меню, которое позволяет пользователю выбрать одно значение из предопределенного списка:

Создание кликабельного выпадающего списка

Создайте выпадающее меню, которое появляется, когда пользователь нажимает на кнопку.

Шаг 1) Добавить HTML:

Пример

Объяснение примера

Используйте любой элемент, чтобы открыть выпадающее меню, например элемент , или

.

Используйте элемент контейнера (например, ), чтобы создать раскрывающееся меню и добавить в него раскрывающиеся ссылки.

Оберните элемент вокруг кнопки и , чтобы правильно расположить выпадающее меню с помощью CSS.

Шаг 2) Добавить CSS:

Пример

/* Кнопка выпадающего списка */
.dropbtn background-color: #3498DB;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
>

/* Кнопка выпадающего меню при наведении и фокусировке */
.dropbtn:hover, .dropbtn:focus background-color: #2980B9;
>

/* Контейнер — необходим для размещения выпадающего содержимого */
.dropdown position: relative;
display: inline-block;
>

/* Выпадающее содержимое (скрыто по умолчанию) */
.dropdown-content display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
>

/* Ссылки внутри выпадающего списка */
.dropdown-content a color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
>

/* Изменение цвета выпадающих ссылок при наведении курсора */
.dropdown-content a:hover

/* Показать выпадающее меню (используйте JS, чтобы добавить этот класс .dropdown-content содержимого, когда пользователь нажимает на кнопку выпадающего списка) */
.show

Объяснение примера

Мы разработали выпадающую кнопку с фоновым цветом, дополнением, эффектом наведения и т.д.

Класс .dropdown использует position:relative , что необходимо, когда мы хотим, чтобы выпадающий контент был размещен прямо под кнопкой выпадающего списка (с помощью position:absolute ).

Класс .dropdown-content класс содержит фактическое выпадающее меню. Он скрыт по умолчанию и будет отображаться при наведении курсора (см. ниже). Примечание в min-width установлено значение 160px. Не стесняйтесь изменить это. Совет: Если вы хотите, чтобы ширина выпадающего контента, чтобы быть так велик, как в раскрывающееся меню, установить width на 100% (и overflow:auto , чтобы включить прокрутку на маленьких экранах).

Вместо использования границы мы использовали свойство box-shadow , чтобы сделать выпадающее меню похожим на»карточку». Мы также используем z-индекс для размещения выпадающего списка перед другими элементами.

Шаг 3) Добавить JavaScript:

Пример

/* Когда пользователь нажимает на кнопку,
переключение между скрытием и отображением раскрывающегося содержимого */
function myFunction() document.getElementById(«myDropdown»).classList.toggle(«show»);
>

// Закройте выпадающее меню, если пользователь щелкает за его пределами
window.onclick = function(event) if (!event.target.matches(‘.dropbtn’)) var dropdowns = document.getElementsByClassName(«dropdown-content»);
var i;
for (i = 0; i < dropdowns.length; i++) var openDropdown = dropdowns[i];
if (openDropdown.classList.contains(‘show’)) openDropdown.classList.remove(‘show’);
>
>
>
>

Источник

Как выбрать или убрать все флажки в чекбоксах с помощью JavaScript

В этом руководстве мы расскажем, как ставить и снимать флажки в input type checkbox с помощью JavaScript . Пользователь сможет одним кликом включить или выключить все элементы списка, что значительно сэкономит его время.

Посмотреть результат

Чтобы установить или убрать все флажки в чекбоксах, нужно:

Шаг 1 . Создайте HTML файл , сделайте его разметку, примените стили и напишите код JavaScript .

Мы создали файл HTML и сохранили его как checkbox.html :

    body < width:100%; margin:0 auto; padding:0px; background-color:#424242; font-family:helvetica; >#wrapper < text-align:center; margin:0 auto; padding:0px; width:100%; >h1 < margin-top:50px; color:#D8D8D8; >h1 p < font-size:14px; color:white; >input[type="button"] < background:none; color:white; border:1px solid white; width:100px; height:50px; border-radius:50px; margin:10px; font-weight:bold; >input[type="checkbox"] < width:20px; height:20px; >td  
  
 
 
PHP
 
 
 
HTML
 
 
 
JavaScript
 
 
 
jQuery
 
 
 
CSS
 
 
 
MySQL
 
 
 
  

Мы написали разметку для input type checkbox JavaScript , и создали две кнопки: одна для того, чтобы выбрать все элементы списка, другая – чтобы отменить выбор всех элементов списка. Две функции – check() и uncheck() ставят или убирают галочки всех чекбоксов. Функция check() проверяет, является ли элемент чекбоксом. Если да, она ставит в нем галочку. Функция uncheck() работает точно так же, как и check() , только снимает галочки со всех чекбоксов.

Вот и все, выбирать или снимать все флажки в input type checkbox при помощи JavaScript просто! Вы можете изменять этот код на ваше усмотрение. Пожалуйста, оставляйте комментарии в форме снизу.

Источник

Как выбрать все кнопки с функцией forEach в JS dom (без jQuery)

У меня есть 3 кнопки с названием класса “btn”; Как выбрать все кнопки с помощью addEventListener и forEach? Я не выбираю по одному HTML-коду:

 const display = document.querySelector(".text"), btn = document.querySelectorAll(".btn"); btn.addEventListener("click", buttons); function buttons() < display.value = btn.value; >; 

Вы можете использовать функцию встроенного массива js foreach на кнопках, выбранных querySelectorAll.

Я изменил имена переменных, чтобы они были сокращены, больше для меня, не стесняйтесь их менять.

В принципе, вы перебираете все кнопки и добавляете обработчик событий к каждому из них.

Примечание. В функции назначения обработчика события вам нужно будет использовать закрытие, иначе функция сразу начнет срабатывать.

const display = document.querySelector(".text"), buttons = document.querySelectorAll(".btn"); buttons.forEach(button => button.addEventListener("click", alterDisplayValue(button))); function alterDisplayValue(button) < return function() < display.value = button.value; >>; 

Вы также можете использовать встроенную функцию в foreach для установки обработчика кликов:

const display = document.querySelector(".text"), buttons = document.querySelectorAll(".btn"); buttons.forEach(button => button.addEventListener("click", function() < display.value = button.value; >)); 

Вы можете использовать for. of для этого как:

const btns = document.querySelectorAll('.btn'); for (const btn of btns) < btn.addEventListener('click', function() < console.log(this.value); >); >

Для использования forEach() вам придется преобразовать btns DOM btns в массив сначала с помощью Array.from() например:

const btns = document.querySelectorAll('.btn'); Array.from(btns).forEach(function(btn) < btn.addEventListener('click', function() < console.log(this.value); >); >);

Источник

Javascript: checkbox выбрать всё

Частенько в скриптах, обслуживающих html — формы требуется функциональный checkbox, который реализует задачу «Выбрать всё». Я написал для себя подобную функцию, которая не использует Jquery, рад предложить её и вам. В этой функции конечно используется цикл для обхода чекбоксов, но обход ограничивается только дочерними элементами формы, в котором расположен checkbox «Выбрать всё».

Здесь как всегда: только одна глобальная переменная — это название функции: checkAll(obj) ей передаем ссылку на элемент, который вызывает функцию: this Этот скрипт можно поместить в любое место на странице, а обработчик события можно навесить прямо в html элементе (я конечно против этого, но здесь это сделано, что бы не усложнять код примера)

Checkbox выбрать всё пример

Checkbox выбрать всё без Jquery

 
Checkbox All
 
Checkbox 1
 
Checkbox 2
 
Checkbox 3
 
Checkbox 4
 
Checkbox 5
 
Checkbox 6
 
Checkbox 7
 
 

Источник

Javascript кнопка выбрать все

Напишем выпадающее меню в JavaScript или его еще называют dropdown menu. Этот код устанавливает прослушиватель событий на кнопке раскрывающегося списка, которая переключает класс show в раскрывающемся меню.

Напишем выпадающее меню в JavaScript или его еще называют dropdown menu. Этот код устанавливает прослушиватель событий на кнопке раскрывающегося списка, которая переключает класс show в раскрывающемся меню. Он также устанавливает прослушиватель для объекта окна, который закрывает раскрывающееся меню, если пользователь щелкает за его пределами.

Пример, который мы сделаем:

.dropdown < position: relative; display: inline-block; >.dropdown-button < background-color: lightgray; color: black; padding: 16px; font-size: 16px; border: none; cursor: pointer; >.dropdown-menu < position: absolute; top: 100%; left: 0; display: none; background-color: lightgray; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2); z-index: 1; >.dropdown-menu.show < display: block; >.dropdown-menu a < color: black; padding: 12px 16px; text-decoration: none; display: block; >.dropdown-menu a:hover

const dropdownButton = document.querySelector(".dropdown-button"); const dropdownMenu = document.querySelector(".dropdown-menu"); dropdownButton.addEventListener("click", function () < dropdownMenu.classList.toggle("show"); >); // Закрываем раскрывающееся меню, если пользователь щелкнет за его пределами. window.addEventListener("click", function (event) < if (!event.target.matches(".dropdown-button")) < dropdownMenu.classList.remove("show"); >>);

Источник