Выбрать все флажки с помощью кнопки

У меня есть HTML-страница с несколькими флажками и по отдельности они могут быть проверены. У меня есть кнопка выбора, так что я должен делать. Когда я нажимаю на кнопку выбора, все флажки должны быть выбраны, записи тысяч.Выбрать все флажки с помощью кнопки

Это моя страница

 <html> 
 
     <head> 
 
     <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> 
 
     <title>monitoring</title> 
 
     <script src="jquery.js"></script> 
 
     </head> \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t 
 
     <table id="example" class="myclass"/> 
 
     <thead> 
 
     <tr> 
 
     <th> 
 
      <button type="button" id="selectAll" class="main"> 
 
      <span class="sub"></span> Select </button></th> 
 
     \t <th>Name</th> 
 
     \t <th>Company</th> 
 
     \t <th>Employee Type</th> 
 
     \t <th>Address</th> 
 
     \t <th>Country</th> 
 
     </tr> 
 
     </thead> 
 
     <tbody> 
 
     \t \t \t \t \t \t \t \t \t \t 
 
     <tr> 
 
     <td><input type="checkbox"/> 
 
     </td> 
 
     <td>varun</td> 
 
     <td>TCS</td> 
 
     <td>IT</td> 
 
     <td>San Francisco</td> 
 
     <td>US</td> 
 
     </tr> 
 

 
     <tr> 
 
     <td><input type="checkbox"/> 
 
     </td> 
 
     <td>Rahuk</td> 
 
     <td>TCS</td> 
 
     <td>IT</td> 
 
     <td>San Francisco</td> 
 
     <td>US</td> 
 
     </tr> 
 

 
     <tr> 
 
     <td><input type="checkbox"/> 
 
     </td> 
 
     <td>johm Doe</td> 
 
     <td>TCS</td> 
 
     <td>IT</td> 
 
     <td>San Francisco</td> 
 
     <td>US</td> 
 
     </tr> 
 

 
     <tr> 
 
     <td><input type="checkbox"/> 
 
     </td> 
 
     <td>Sam</td> 
 
     <td>TCS</td> 
 
     <td>IT</td> 
 
     <td>San Francisco</td> 
 
     <td>US</td> 
 
     </tr> 
 

 
     <tr> 
 
     <td><input type="checkbox"/> 
 
     </td> 
 
     <td>Lara</td> 
 
     <td>TCS</td> 
 
     <td>IT</td> 
 
     <td>San Francisco</td> 
 
     <td>US</td> 
 
     </tr> 
 

 
     <tr> 
 
     <td><input type="checkbox"/> 
 
     </td> 
 
     <td>Jay</td> 
 
     <td>TCS</td> 
 
     <td>IT</td> 
 
     <td>San Francisco</td> 
 
     <td>US</td> 
 
     </tr> 
 

 
     <tr> 
 
     <td><input type="checkbox"/> 
 
     </td> 
 
     <td>Tom</td> 
 
     <td>TCS</td> 
 
     <td>IT</td> 
 
     <td>San Francisco</td> 
 
     <td>US</td> 
 
     </tr> 
 
     \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t 
 
     </tbody> 
 
     </table> 
 
     \t \t \t \t 
 
     </body> 
 
     </html>

источник

2015-04-24 Varun

_when пользователь нажимает на выбор он должен выбрать все тысячи записей_ для этого есть способы, вы что-то пробовали? – Jai

$(document).ready(function() { 
    $('body').on('click', '#selectAll', function() { 
    if ($(this).hasClass('allChecked')) { 
     $('input[type="checkbox"]', '#example').prop('checked', false); 
    } else { 
     $('input[type="checkbox"]', '#example').prop('checked', true); 
    } 
    $(this).toggleClass('allChecked'); 
    }) 
});

Example on jsFiddle

Это добавит класс, allChecked, на "Select All"когда все элементы были проверены (и удалите их, когда все не сняты). Кроме того, он будет выглядеть только в пределах #example (таблица с идентификатором пример). Разумеется, это может быть изменено по вашему вкусу, как ни с чем.

Edit:

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

Edit: Просто обновил синтаксис в скрипку для <table> тега, как это было не само закрывающий тег

источник

2015-04-24 07:55:44 Mackan

ваш пример работает здесь «Пример jsFiddle», но когда я использую скрипт в свой файл, он не работает. Я также включил класс allChecked в SelectAll butoon – Varun

Вам не нужно добавлять классы. Возможно, вам просто нужно убедиться, что все загружено правильно: см. Мое обновление в ответе выше. – Mackan

@varun Кроме того, какая версия jQuery скрывается за 'jquery.js'? Я бы удостоверился, что jQuery действительно загружен. – Mackan

Вы можете попробовать это:

$('#selectAll').click(function(e){ 
    $(this).toggleClass('clicked'); 
    $(this).closest('table').find('input[type="checkbox"]').prop('checked', $(this).hasClass('clicked')) 
});

В этом коде, что происходит это:

Сначала вы привязываете клик по кнопке.
После этого нажмите кнопку «Пустой ключ» на кнопку.
Затем перейдите по столу и найдите все флажки.
затем измените свойство checked на true/false, что зависит от класса, добавленного к кнопке.

источник

2015-04-24 07:45:11 Jai

Это хорошая идея, чтобы решить проблему, когда ОП не показывает признак попытки сделать это сам? – Regent

@Regent да, это так. Я думаю, OP должен предоставить некоторые из своих попыток. – Jai

@Regent. Аналогичный вопрос вчера задал ФП: http://stackoverflow.com/questions/29823843/how-do-i-select-all-check-box-when-i-click-on-select-button-using -jquerry. Это разрешено? Я не уверен, что я спрашиваю. – Zee

-1

очень хорошее описание здесь. здесь с ответом http://www.sanwebe.com/2014/01/how-to-select-all-deselect-checkboxes-jquery

источник

2015-04-24 07:47:16

Хотя ссылка может дать объяснение, вы должны отправить решение здесь. – Regent

по ссылке все описано отлично, поэтому лучше очистить концепцию от ссылки. не только решений. @Regent –

@XeeShan. [Ссылка] (http://meta.stackexchange.com/questions/8231/are-answers-that-just-contain-links-elsewhere-really-good-answers) только ответы не приветствуются в SO, поскольку ссылка может устареть через несколько дней. А также, поскольку это требует от вас выхода на сайт, чтобы найти решение. Мы хотим, чтобы решения находились на сайте_. Цитата из [здесь] (http://meta.stackoverflow.com/a/251007/3894168) – Zee

Попробуйте

Demo

$("#selectAll").on("click", function() { 
    $("#example tr").each(function() { 
      $(this).find("input").attr('checked', true);    
    }); 
});

источник

2015-04-24 07:54:04

Выбрать все флажки с помощью кнопки

ответ

Смежные вопросы