Функция кнопки onClick для переключения флажков «все» - PullRequest
Новая
       103

Функция кнопки onClick для переключения флажков «все»

0 голосов
/ 12 января 2020

Как мне go сделать javascript для кнопки, чтобы выбрать и снять все флажки?

Флажок HTML (все они выглядят одинаково с другим значением): 

<input type="checkbox" name="moviebox[]" value="Zombieland" style="width: 15px; height: 15px; margin: 0px;">

Моя кнопка: 

<input type="button" value="Select All/None">

Ответы [ 2 ]

1 голос
/ 12 января 2020

Добавьте прослушиватель событий click к вашей кнопке, а затем установите все флажки при ее нажатии. 

const button = document.querySelector(".select-all");
const checkboxes = document.querySelectorAll("input[type='checkbox']");
let everythingChecked;

button.addEventListener("click", () => {
  checkboxes.forEach(checkbox => {
    checkbox.checked = everythingChecked ? false : true;
  });
  everythingChecked = !everythingChecked
});
<input type="checkbox" name="foo">
<input type="checkbox" name="bar">
<input type="checkbox" name="baz">

<button type="button" class="select-all">
  Button
</button>
0 голосов
/ 12 января 2020
  1. Добавить имя = "movieboxes" для всех флажков, на которые вы хотите, чтобы кнопка воздействовала. 
<input type="checkbox"  name="movieboxes" style="width: 15px; height: 15px; margin: 0px;"/> Zombieland<br/>
Добавить onClick для кнопки 
<input type="button" onClick="toggleMovieBoxes()" value="Select All/None">
То, что в основном делает функция, это получает все элементы с именем 'movieboxes', которое зацикливает каждого из них и меняет его значение (От истинного до ложного и от ложного до истинного)

Ваш Весь файл html должен выглядеть следующим образом: 

<html>
<head>
    <script language="JavaScript">
        function toggleMovieBoxes(){
            var movie_cbs = document.getElementsByName('movieboxes');
            for (var i=0, n=movie_cbs.length;i<n;i++) {
                movie_cbs[i].checked = !movie_cbs[i].checked;
            }
        }
    </script>
</head>

<body>
<input type="checkbox"  name="movieboxes" style="width: 15px; height: 15px; margin: 0px;"/> Zombieland<br/>
<input type="checkbox"  name="movieboxes" style="width: 15px; height: 15px; margin: 0px;"/> Zombieland 2<br/>
<input type="button" onClick="toggleMovieBoxes()" value="Select All/None">
</body>

</html>

Редактировать:

Добавлена ​​переменная, поэтому все флажки будут синхронизироваться по ее значению, также добавлено крошечное прикосновение, чтобы пользователь лучше знал, что это кнопка переключения, и она каждый раз делает что-то новое. 

var is_checked = false;
function toggleMovieBoxes(){
            var movie_cbs = document.getElementsByName('movieboxes');
            var button = document.getElementById('btn');

            is_checked = !is_checked;

            if(is_checked)
                 button.value = "Deselect all";
            else
     button.value = "Select all";

            for (var i=0, n=movie_cbs.length;i<n;i++) {
                movie_cbs[i].checked = is_checked;
            }
        }
...