Check and uncheck чекбоксы с помощью jQuery

How to check and uncheck a checkbox with jQuery

 

Example form

Our example form looks like this:

 
<inputtype="checkbox"name="foo"value="bar"/>
<inputtype="button"onclick="show_checked()"value="Show"/>
<inputtype="button"onclick="set_checked(true)"value="On"/>
<inputtype="button"onclick="set_checked(false)"value="Off"/>

There's checkbox with name "foo" and then three buttons. The first calls a functionto show us if the checkbox is checked or not, and the second two change it from being checked to not being checked.

Check if the checkbox is checked

There are several ways to get to work out if a checkbox is checked or not with jQuery, and here a couple of alternatives. Each will return true if it's checked or false if it's not.

 
$('input[name=foo]').is(':checked')
$('input[name=foo]').attr('checked')

Set the checkbox to checked or not checked

The status of the checkbox can be changed using the attr() function like so, to check the box:

 
$('input[name=foo]').attr('checked', true);

and like so to uncheck the box:

 
$('input[name=foo]').attr('checked', false);

Example

And finally, here's the example form in action:

A note about boolean values

There is a discussion in the comments below about issues found with Chromium which may be related to string values of true and false being passed whereas it needs to be strictly a boolean true or false otherwise unexpected consequences can happen.

It has been suggested to use .removeAttr() instead but this may have other consequences from my reading of the comments on the jQuery documentation page for the function. I will follow up this post at a later date and do more testing to confirm for sure

Toggling a checkbox when clicking a label

Note that Javascript is not required to toggle a checkbox when clicking some text; that's what HTML <label>s are for. Have a read of my follow up post using HTML <label> to toggle and select fields for more information.

оригинал тут.

Jquery. Начало. jQuery для начинающих

1. Основы

Это базовое руководство, составленное чтобы помочь Вам начать работать с jQuery.

Создайте новую страничку со следующим содержанием:

  <html>
  <head>
    <script type="text/javascript" src="/path/to/jquery.js"></script>
    <script type="text/javascript">
      // Your code goes here
    </script>
  </head>
  <body>
    <a href="http://jquery.com/">jQuery</a>
  </body>
  </html>

Измените атрибут src в тэге скрипта, указав путь, где хранится Ваш файл jquery.js. Например, если jquery.js находится в той же дирректории что и HTML файл, следует написать так:

<script type="text/javascript" src="/jquery.js"></script>

Саму библиотеку jQuery Вы можете скачать по адресу http://docs.jquery.com/Downloading_jQuery

1.1.Запуск кода при загрузке документа

Большинство JavaScript программистов, создавая новую скрипт, начинают его со следующего кода:

window.onload = function(){ ... }

Между фигурными скобками располагается код, который будет выполняться сразу после загрузки страницы. Однако, JavaScript код не запуститься, пока на странице не будут загружены все изображения (в том числе и банеры). Причина использования window.onload в самом начале программы заключается в том, что HTML документ ещё не успевает загрузиться, на момент когда вы уже пытаетесь запустить ваш код.

Для решения обоих этих проблем, в jQuery есть введено специальное событие, под названием ready:

$(document).ready(function(){
   // Здесь ваш код
});

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

1.2. Выполнение действия при клике по ссылке

Первая вещь, которую мы собираемся опробовать - это выполнение действия, которое будет происходить при каждом клике по ссылке. В ready function (из примера выше), добавьте следующее:

$("a").click(function(){
   alert("Спасибо, что к нам зашли!");
});

Сохраните HTML файл и обновите (F5) тестовую страничку в браузере. Клик по любой ссылке на странице должен вызвать окно предупреждения, до того как осуществится переход на другую страницу.

Чтобы при нажатии на ссылку и/или для другого события, отменить действие по умолчанию, нужно чтобы обработчик событий возвращал false. Для этого добавьте строчку return false, как показано ниже:

 $("a").click(function(){
   alert("Спасибо, что к нам зашли!");
   return false;
});

1.3. Добавление класса

Ещё одной задачей, которую часто приходится выполнять, это добавление (или удаление) классов для элементов. Например:

$("a").addClass("test");

Если для тестовой страницы добавить следующее описание стилей:

<style type="text/css">a.test { font-weight: bold; }
 </style>

а потом вызвать метод addClass - все элементы станут выделены жирным шрифтом. Чтобы удалить класс, вам нужно использовать removeClass

1.4.Специальные эффекты

В jQuery, есть готовые эффекты, способные сделать ваш web-сайт действительно выдающимся. Вставьте этот код, вместо написанного раньше:

$("a").click(function(){
$(this).hide("slow");
return false;
});

Теперь, если вы нажмёте на любую ссылку на вашей тестовой страничке, она (ссылка) медленно исчезнет.

2.Chainability (Магия jQuery)

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

В двух словах: каждый метод в jQuery возвращает ссылку на результат своей работы, что позволят 'сцеплять' эти методы. Например:

$("a").addClass("test").show().html("foo");

Каждый из этих отдельных методов (addClass, show, html) возвращает объект jQuery, позволяя вам продолжать работать с выбранным элементом.

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

$("a")
.filter(".clickme")
.click(function(){
alert("You are now leaving the site.");
})
.end()
.filter(".hideme")
.click(function(){
$(this).hide();
return false;
})
.end();

Этот скрипт будет работать со следующим HTML кодом:

<a href="http://google.com/" title="http://google.com/" class="external free">Я выдам сообщение при клике</a>
<a href="http://yahoo.com/" title="http://yahoo.com/" class="external free">Нажми на меня чтобы я исчезла!</a>
<a href="http://microsoft.com/" title="http://microsoft.com/" class="external free">Ну а я - нормальная ссылка :)</a>

Методы, которые позволяют "на ходу" менять селектор jQuery и выполнение которых можно отменить с помощью end() это:

  • add()
  • children()
  • eq()
  • filter()
  • find()
  • gt()
  • lt()
  • next()
  • not()
  • parent()
  • parents()
  • siblings()

Подробней ознакомиться с данными методами вы можете по адресу http://docs.jquery.com/Traversing (Traversing API documentation).

3.callBack, функции и ключевое слово 'this'

Обратный вызов (callBack) - это функция, которая размещается как аргумент для другой функции и запускается после того как её 'родительская' функция будет выполнена.Особенность функции обратного вызова в том, что функции которые создаются после "родительской" могут быть запущены ДО запуска callBack.

Ещё одной важной вещью, является умение правильно установить обратный вызов.

3.1. Обратный вызов без аргументов

Для обратного вызова без аргументов следует писать так:

$.get('myhtmlpage.html', myCallBack);

Заметьте что второй параметр здесь - просто имя функции (не заключается в кавычки и без указания круглых скобок). Функции в Javascript могут быть переданы как переменные и запущены далее в коде.

3.2. Обратный вызов с аргументами

"А как быть, если мне необходимо указать аргументы в своей функции?", спросите вы.

3.2.1. Ошибочный синтаксис

Неправильный способ (не будет работать!)

$.get('myhtmlpage.html', myCallBack(param1, param2));

Это не будет работать потому что произойдет вызов функции myCallBack(param1, param2) и результат ее работы будет передан как второй параметр для метода $.get().

3.2.2 Верный синтаксис

Правильный способ (обратите внимание на использование конструкции "function(){"перед вызовом "myCallBack()" )

$.get('myhtmlpage.html', function(){
	myCallBack(param1, param2);
});

То есть мы используем вызов безымянной функции

function(){ 
myCallBack(param1, param2);
}

а уже из нее происходит вызов нужной нам функции с передацей ей аргументов

Этот метод работает, потому что он вставляет безымянную функцию как второй параметр в $.get() без её предварительного запуска.

Ресурс-источник: http://ballista.ru.

Полезные штучки:

Bold шрифт в IE

Необходимо было выставить для элемента style="background-color:

но прозрачный не подойдёт :(

Как пример <div style="background-color:#fff">...</div>

Prototype & JQuery & Mootolls. Совмещаем

Prototype вместе с JQuery на одной странице без проблем

Если вам нужно использовать одновременно две javascript библиотеки, такие как Jquery и Prototype, тосуществует проблема их совместной "трудоспособности". Чтобы решить проблему нужно включить jQuery в режим “noConflict” и пользоваться вместо индентификатора $  - другим, например $j:

Таким образом в проекте для библиотеки Prototype применяйте знак $, а для библиотеки jQuery - $j.

Mootools & JQuery

Example: Maps the original object that was referenced by $ back to $.

jQuery.noConflict();
// Do something with jQuery
jQuery("div p").hide();
// Do something with another library's $()
$("content").style.display = 'none';

Больше примеров: тут...
Scroll to Top
Ads: