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

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

Реклама


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

Рейтинг:
Дата: 27 января 2010 Просмотры 17005

В прошлой статье "Что такое 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", то тогда будет снято и выделение со всех остальных чекбоксов!

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

Оцените эту статью:
ТЕГИ:
Похожие статьи
Интересно почитать

    Получать новые материалы этого сайта на свой email адрес?

    Отправлять мне комментарии по эл. почте?

Реклама

Топ комментаторы

  • Иван (1)

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

Система Orphus
https://biznesguide.ru/coding/91.html
3,73 из 5 на основе 28 оценок.
Твиттер Facebook Google plus RSS