Я хочу установить все флажки из одного флажка

function chk() {
  var a = $('#chkAll').prop('checked');

  if (a == true)
    $('.hobbie').attr('checked', 'checked');
  else
    $('.hobbie').removeAttr('checked');
}

<script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Select All <input onclick = "chk()" type = "checkbox" id = "chkAll">
<br>
<input type = "checkbox" class = "hobbie">
<input type = "checkbox" class = "hobbie">
<input type = "checkbox" class = "hobbie">
<input type = "checkbox" class = "hobbie">

Если я щелкнул флажок `` Выбрать все '', он установит все флажки, и если я снова нажму, он снял все флажки, но после этого он не работает, пока я не обновлю страницу.

вы удаляете атрибут, отмеченный в состоянии else, поэтому он не сработает второй раз. просто переключите true / false. функция chk () {var a = $ ('# chkAll'). prop ('проверено'); if (a == true) $ ('. hobbie'). attr ('проверено', 'true'); else $ ('. hobbie'). attr ('проверено', 'ложь); }}

— 22.05.2018 07:11

javascript jquery html

22.05.2018 07:08

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 4

попробуйте простой код:

    $("#chkAll").click(function () {
        $(".hobbie").attr('checked', this.checked);
        //or
        $(".hobbie").prop('checked', true);
    });

как снова снять отметку

— 22.05.2018 07:13

$ (". хобби"). prop ('проверено', ложь);

— 22.05.2018 07:19

22.05.2018 07:10

Ответ принят как подходящий

Нет необходимости проверять состояние. Кратчайший способ сделать это.

function chk() {
  $('#chkAll').on('change', function() {
    $('.hobbie:checkbox').prop('checked', $(this).is(":checked"));
  });
}

<script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input onclick = "chk()" type = "checkbox" id = "chkAll">
<br>
<input type = "checkbox" class = "hobbie">
<input type = "checkbox" class = "hobbie">
<input type = "checkbox" class = "hobbie">
<input type = "checkbox" class = "hobbie">

У него уже есть onClick, тогда вы использовали функцию change, поэтому здесь нет необходимости использовать двойную функцию.

— 22.05.2018 07:20

Я согласен с @Pedram, нет необходимости использовать 2 таких события.

— 22.05.2018 07:30

22.05.2018 07:11

Используйте этот код:

function chk(obj) {
  $('.hobbie').prop('checked', $(obj).prop('checked'));
}

демонстрация

function chk(obj) {
  $('.hobbie').prop('checked', $(obj).prop('checked'));
}

<script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Select All <input onclick = "chk(this)" type = "checkbox" id = "chkAll">
<br>
<input type = "checkbox" class = "hobbie">
<input type = "checkbox" class = "hobbie">
<input type = "checkbox" class = "hobbie">
<input type = "checkbox" class = "hobbie">

Это лучший подход.

— 22.05.2018 07:35

22.05.2018 07:11

Один лайнер function

function chk(isChecked) {
  $('.hobbie').prop('checked', isChecked);
}

<script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Select All <input onclick = "chk(this.checked)" type = "checkbox" id = "chkAll">
<br>
<input type = "checkbox" class = "hobbie">
<input type = "checkbox" class = "hobbie">
<input type = "checkbox" class = "hobbie">
<input type = "checkbox" class = "hobbie">

22.05.2018 07:21

Другие вопросы по теме

Использовать идеальный плагин полосы прокрутки в textArea

Как реализовать автозаполнение в модальном окне с помощью JQuery в MVC5

C# Bitmap to Html img с использованием ajax не работает

Есть ли событие при выборе события "выпадающего списка" в jquery

Передавать значение параметра между страницами

Разрешение экрана вдвое меньше, чем есть на самом деле

JQuery добавляет уникальный идентификатор к входам и классу в clone ()

Изменить фон div в зависимости от значения div

Как включить внешнюю функцию js в качестве внутренней функции js?

Одинаковый объем данных приводит к перемешиванию индекса при сортировке в таблицах данных

Я хочу установить все флажки из одного флажка

Ответы 4

Другие вопросы по теме

Похожие вопросы