Генератор форм

Для веб-мастера

AutoClicker - Автокликер для популярных тапалок в телеграм, который запускается на вашем ПК в браузере.
CheckTrust - сервис проверки качества сайтов. Экономия до 70% на аренде ссылок.
GoGetLinks - популярная система для получения качественных ссылок в обзорах с размещением навсегда.
Etxt.RU - биржа статей.
FastVPS - качественный VPS/VDS хостинг в германии.
Roistat - система сквозной бизнес-аналитики.

Знакомство с jQuery! Выделение всех чекбоксов!

Рейтинг:

Дата: 27 января 2010 Просмотры

21048

В прошлой статье "Что такое jQuery? Первое знакомство!" я сделал краткий обзор, при этом не показал ни каких примеров работы этой замечательной библиотеки! Признаю свою ошибку, поєтому сегодня я постараюсь показать Вам в действии всю прелесть работы с jQuery!

Очень часто при разработке какого-нибудь скрипта требуется, при нажатии на один чекбокс выделить все имеющиеся на странице! Выглядит это так:

	Список IP-адресов
	127.0.0.1
	127.0.0.2
	127.0.0.3
	127.0.0.4

С помощью jQuery это делается очень легко! И сейчас я покажу Вам, как это сделать!

Итак, для начала создадим html-документ и между тегами <head> и </head> подключим саму библиотеку jQuery, которую Вы должны были скачать в прошлой статье!

<html>
<head>
<meta  http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Выделение  всех чекбоксов</title>
<script  type="text/javascript" src="http://путь/к/jquery.js"></script>
</head> <body>
</body> 
</html>

Здесь следует правильно указать адрес до библиотеки на Вашем сайте!

Дальше создадим html-разметку страницы, для тестирования чекбоксов:

<table  cellspacing="0" cellpadding="5" align="center"  >
   <tr  bgcolor="#FFFFCC"> <td  align="center">
  <input type="checkbox"  id="selall" value="1"  class="checkbox">
  </td> <td><i>Список IP-адресов</i></td> </tr> 
      <tr> <td align="center" >
  <input  type="checkbox" class="checkbox" value="" name="ip[]">
  </td>  <td>127.0.0.1</td> </tr> <tr> <td  align="center" >
  <input  type="checkbox" class="checkbox" value="" name="ip[]">
  </td>  <td>127.0.0.2</td> </tr>
<tr> <td align="center" >
  <input  type="checkbox" class="checkbox" value="" name="ip[]">
  </td>  <td>127.0.0.3</td> </tr>
<tr> <td align="center" >
  <input  type="checkbox" class="checkbox" value="" name="ip[]">
  </td>  <td>127.0.0.4</td> </tr>
 </table>

Сразу хочу обратить Ваше внимание на то, что все checkbox имеют одинаковый class="checkbox", а тот checkbox (самый первый) при клике по которому, должны выделяться все чекбоксы еще имеет идентификатор id="selall".

Теперь приведу сам javascript-код, благодаря которому и происходит выбор всех чекбоксов:

<script  type="text/javascript">
  <!-- $(function () {
     $("#selall").click(function  () {
         if  (!$("#selall").is(":checked")){
              $(".checkbox").removeAttr("checked");
        }
        else{
             $(".checkbox").attr("checked","checked");
       }

     });
});
//-->
</script>

Теперь немного пояснений! Для того чтобы запустить Ваш javascript-код используется следующая конструкция:

$(function($)  {
 });

Дальше находим элемент с идентификатором id="selall", при клике по которому (событие click) запускается функция, с помощью который мы и выделяем все чекбоксы!

$("#selall").click(function  () {
 });

Далее мы проверяем, выделен ли чекбокс или нет. Для этого находим нужный чекбокс с идентификатором id="selall", и проверяем его!

$("#selall").is(":checked");

Если чекбокс с идентификатором id="selall" отмечен, то тогда отмечаем все чекбоксы, с классом class="checkbox"

$(".checkbox").attr("checked","checked");

Если же снять отметку с чекбокса с идентификатором id="selall", то тогда будет снято и выделение со всех остальных чекбоксов!

Вот такой вот простой пример!

Оцените эту статью:

ТЕГИ:

jquery , checkbox

Простая CRM

Нашли ошибку в тексте

https://biznesguide.ru/coding/91.html
3,57 из 5 на основе 32 оценок.

Новичку Инфо-Бизнеса!

Категории

Генератор форм

Для веб-мастера

Реклама

Знакомство с jQuery! Выделение всех чекбоксов!

Простая CRM

Нашли ошибку в тексте