Проверить видимость элемента. Код
Для начала зададим стили для элемента:
.example_div{
width: 100px;
height: 100px;
background-color: red;
margin-top: 50px;
margin-left: 50px;
}
Теперь добавим сам элемент на страницу:
<div class="example_div"></div>
Для удобства тестирования, можно добавить до и после элемента несколько , чтобы страница была длинная — появится скролл.
А теперь самая интересная часть, js:
// функция проверки полной видимости элемента
function checkPosition(){
// координаты дива
var div_position = $('.example_div').offset();
// отступ сверху
var div_top = div_position.top;
// отступ слева
var div_left = div_position.left;
// ширина
var div_width = $('.example_div').width();
// высота
var div_height = $('.example_div').height();
// проскроллено сверху
var top_scroll = $(document).scrollTop();
// проскроллено слева
var left_scroll = $(document).scrollLeft();
// ширина видимой страницы
var screen_width = $(window).width();
// высота видимой страницы
var screen_height = $(window).height();
// координаты углов видимой области
var see_x1 = left_scroll;
var see_x2 = screen_width + left_scroll;
var see_y1 = top_scroll;
var see_y2 = screen_height + top_scroll;
// координаты углов искомого элемента
var div_x1 = div_left;
var div_x2 = div_left + div_height;
var div_y1 = div_top;
var div_y2 = div_top + div_width;
// проверка - виден див полностью или нет
if( div_x1 >= see_x1 && div_x2 <= see_x2 && div_y1 >= see_y1 && div_y2 <= see_y2 ){
// если виден
$('.example_div').css({'background-color': 'green'});
}else{
// если не виден
$('.example_div').css({'background-color': 'red'});
}
}
$(document).ready(function(){
$(document).scroll(function(){
// при скролле страницы делаем проверку
checkPosition();
});
// после загрузки страницы сразу проверяем
checkPosition();
// проверка при масштабировании и изменении размера страницы
$(window).resize(function(){
checkPosition();
});
});
Вот и все, если у кого-то возникли сложности, можете скачать готовый, рабочий исходник — тут.
Отключение наблюдения за элементом
Прекратить работу observer можно с помощью метода IntersectionObserver.unobserve().
Давайте рассмотрим еще один пример, как проверить на нативном js видимость элемента. Допустим нам требуется создать «ленивую» загрузку текста в блок после того, как он войдет в зону видимости. Как только это произойдет, дальнейшее наблюдение за ним уже не потребуется, поэтому observer можно отключить.
Внутри callback-функции можно передать сам observer в качестве второго аргумента — obs. Если entry.isIntersecting равен true, произойдет добавление текста в элемент. Затем сработает метод obs.unobserve() для entry.target и снимет наблюдение за ним.
// Создаем новый observer (наблюдатель)
let observer = new IntersectionObserver(function (entries, obs) {
entries.forEach(function (entry) {
// Если элемент в зоне видимости, то ничего не происходит
if (!entry.isIntersecting) return;
// Отключаем «наблюдатель»
obs.unobserve(entry.target);
// Добавляем текст
entry.target.textContent = ` Элемент вошел в зону видимости.`;
});
});
// Задаем элемент для наблюдения
let el = document.querySelector('.element');
// Прикрепляем его к «наблюдателю»
observer.observe(el);
В качестве альтернативного варианта есть возможность прекратить наблюдение за всеми элементами с помощью метода IntersectionObserver.disconnect().
// Отключаем наблюдение за всеми элементами observer.disconnect();
1. Using jQuery
# Example 1 – With List box
Create a List box and a checkbox for select or unselect all options in List.
HTML
In HTML creating a checkbox and a list box that contains usernames.
<div class='container'>
<h2>Example1 - With Listbox</h2>
<input type='checkbox' id='checkallusers' value=''> Select All<br/>
<select id='sel_users' size="6" multiple>
<option value='Anil'>Anil</option>
<option value='Amit'>Amit</option>
<option value='Mayank'>Mayank</option>
<option value='Sonarika'>Sonarika</option>
<option value='Vishal'>Vishal</option>
<option value='Yogesh'>Yogesh</option>
</select>
</div>
Script
Checkbox change event –
If checkbox state is then loop through all options of the select element and set its attribute to .
Perform its opposite if the checkbox state is .
Select change event
This one is only for changing the checkbox state based on option selection.
Check total options and total selected options if it is equal then set Select All checkbox checked otherwise unchecked it.
<script type='text/javascript'>
$(document).ready(function(){
$("#checkallusers").change(function(){
var checked = $(this).is(':checked'); // Checkbox state
// Select all
if(checked){
$('#sel_users option').each(function() {
$(this).prop('selected',true);
});
}else{
// Deselect All
$('#sel_users option').each(function() {
$(this).prop('selected',false);
});
}
});
// Changing state of Checkbox
$("#sel_users").change(function(){
// When total options equals to total selected option
if($("#sel_users option").length == $("#sel_users option:selected").length) {
$("#checkallusers").prop("checked", true);
} else {
$("#checkallusers").prop("checked", false);
}
});
});
</script>
# Example 2 – With Checkboxes
Using a single checkbox to check or uncheck all other checkboxes.
HTML
Created a checkbox with and 4 more checkboxes with .
<div class='container'> <h2>Example2 - With Checkboxes</h2> <input type="checkbox" id='checkall' /> Select All<br/> <input type="checkbox" class='checkbox' name="languages" value="PHP"> PHP<br/> <input type="checkbox" class='checkbox' name="languages" value="AngularJS"> AngularJS<br/> <input type="checkbox" class='checkbox' name="languages" value="Python"> Python<br/> <input type="checkbox" class='checkbox' name="languages" value="Java"> Java<br/> </div>
Script
Check all checkbox Change event
Get checkbox state if its then loop through all checkboxes and set state to otherwise set to .
Click event on Checkbox with class=’checkbox’
Check total checkbox is equal to total checked checkboxes. If it is equal then set check all checkbox checked otherwise unchecked.
<script type='text/javascript'>
$(document).ready(function(){
// Check or Uncheck All checkboxes
$("#checkall").change(function(){
var checked = $(this).is(':checked');
if(checked){
$(".checkbox").each(function(){
$(this).prop("checked",true);
});
}else{
$(".checkbox").each(function(){
$(this).prop("checked",false);
});
}
});
// Changing state of CheckAll checkbox
$(".checkbox").click(function(){
if($(".checkbox").length == $(".checkbox:checked").length) {
$("#checkall").prop("checked", true);
} else {
$("#checkall").prop("checked", false);
}
});
});
</script>
Работа с Checkbox и Radiobox на jQuery
Проверить состояние checkbox и radiobox
if ($('#checkbox').is(':checked')) {
alert('Включен');
} else {
alert('Выключен');
}
// Другой вариант
if ($('#checkbox').prop('checked')) {
alert('Включен');
} else {
alert('Выключен');
}
Отметить и снять checkbox или radiobox (поменять состояние «выбрано»)
// Отметить checkbox
$('#checkbox').prop('checked', true);
// Отметить radiobox
$('#radiobox').prop('checked', true);
// Снять checkbox
$('#checkbox').prop('checked', false);
// Снять radiobox
$('#radiobox').prop('checked', false);
Перебрать все отмеченные (выбранные) checkbox и radiobox на странице
// Перебрать все отмеченные checkbox
$("input:checked").each(function(){
// что-то делаем
});
$("input:checked").each(function(){
// что-то делаем
});
// Сокращенный вариант
$("input:checkbox:checked").each(function(){
// что-то делаем
});
$("input:radio:checked").each(function(){
// что-то делаем
});
Создание новых элементов
У функции $ есть также последняя роль: создание новых элементов. Если в $() передаётся фрагмент HTML, то это создаст новый элемент в памяти — иными словами, элемент будет создан, но не добавлен на страницу, пока вы этого не сделаете.
Вы также можете создать элемент, передавая объект с информацией о его создании:
Обратите внимание, что мы должны указать свойство class в кавычках, поскольку class это в JavaScript и написание без кавычек вызовет ошибки в некоторых браузерах. Смотрите для получения подробной информации о разных свойствах, которые можно включать в объект
Мы рассмотрим как добавлять созданные элементы на страницу в следующем разделе, в котором рассказывается о передвижении по документу и манипуляции c ним.
Пример: как показать div, если отмечен чекбокс
В этом примере jQuery checkbox set checked (« отмечен ») — когда он отмечен, отображается элемент div . Если убрать отметку, div пропадает:
Посмотреть демо и код онлайн
Полный код примера :
В примере выше мы используем событие click для чекбокса и метод toggle , чтобы скрывать или показывать div . Используя jQuery , сделать это предельно просто. Рассмотрим ещё один пример.
Пример: как показать/скрыть веб-форму в зависимости от состояния чекбокса
В этом примере мы используем для jQuery input checkbox checked событие change . Когда ставится или убирается галочка, исполняется соответствующий код.
В демо, ссылка на который приведена ниже, мы скрываем элемент div , содержащий веб-форму. Форма сделана при помощи встроенных классов Bootstrap , поэтому вместе со ссылкой на библиотеку jQuery в разделе также указан CSS-файл Bootstrap .
Отметьте или уберите галочку с чекбокса, чтобы скрыть или показать веб-форму. Для этого используются методы $.show и $.hide :
Посмотреть демо и код онлайн
Полный код примера :
Обратите внимание, как происходит jQuery checkbox checked проверка, и реализуются условия if/else для показа или скрытия формы
Пример: проверка чекбокса с помощью JavaScript
Если вы не хотите использовать jQuery для проверки состояния чекбокса и выполнения на ее основе различных действий, можно воспользоваться JavaScript .
В приведенном ниже примере для получения состояния чекбокса мы используем свойство JavaScript getElementById . Если чекбокс отмечен, показывается кнопка, если нет — кнопка скрывается:
Посмотреть демо и код онлайн
Полный код примера :
В примере, приведенном выше, JavaScript-код для jQuery checkbox checked проверки и скрытия/показа кнопки расположен над тегом
Как я могу получить значение флажка в jQuery?
Чтобы получить значение атрибута Value, вы можете сделать что-то вроде этого:
Или, если вы установили class или id для него, вы можете:
Однако это вернет одно и то же значение, независимо от того, отмечено оно или нет, это может сбить с толку, поскольку оно отличается от представленного поведения формы.
Чтобы проверить, проверено это или нет, выполните:
Эти два способа работают:
Попробуйте это небольшое решение:
Единственными правильными способами получения значения флажка являются следующие
как описано в официальных документах на веб-сайте jQuery. Остальные методы не имеют ничего общего с свойством этого флажка, они проверяют атрибут, который означает, что они проверяют начальное состояние флажка при его загрузке. Короче говоря:
- Когда у вас есть элемент, и вы знаете, что это флажок, вы можете просто прочитать его свойство, и вам не понадобится jQuery для этого (т.е. elem.checked ), или вы можете использовать $(elem).prop(«checked») , если вы хотите положиться на jQuery.
- Если вам нужно знать (или сравнивать) значение, когда элемент был сначала загружен (т.е. значение по умолчанию), правильный способ сделать это – $(elem).is(«:checked») .
Ответы вводят в заблуждение, проверьте сами:
Есть форма с чекбоксами.
этот код выводит только значение первого отмеченного бокса (один алерт выскакивает), хотя отмечено несколько. Как получить значение всех отмеченных чекбоксов? Чтобы было столько алертов, сколько отмечено чекбоксов
Checking if a checkbox is checked
A checkbox has two states: checked and unchecked.
To get the state of a checkbox, you follow these steps:
- First, select the checkbox using a DOM method such as or .
- Then, access the property of the checkbox element. If its property is , then the checkbox is checked; otherwise, it is not.
See the following example:
In this example:
First, create the HTML checkbox element:
Second, select the checkbox with id and examine the property:
Because the checkbox is unchecked, you’ll see in the console:
Consider another example:
In this example, the selector selects the element with the id and has the attribute . For example, it matches the following element:
But not this one:
Therefore, if the checkbox element with the id is checked, the will return it. On the console window, you’ll see the value because the checkbox is unchecked:
Типы данных в JavaScript
Перед тем как начать рассматривать проверку типов с помощью оператора важно взглянуть на существующие типы данных в JavaScript. Хотя в этой статье не рассматриваются подробные сведения о типах данных JavaScript, вы все равно сможете что-то почерпнуть по мере чтения статьи
До ES6 в JavaScript присутствовало 6 типов данных. Но с появлением ES6-спецификации был добавлен тип данных . Ниже приведен список всех существующих типов данных:
- String
- Number
- Boolean (значения true and false)
- null (значение null)
- undefined (значение undefined)
- Symbol
- Object
Первые шесть типов данных относятся к примитивным типам. Все другие типы данных помимо вышеуказанных шести являются объектами и относятся к ссылочному типу. Объект — это не что иное, как коллекция свойств, представленная в виде пар ключ и значение.
Обратите внимание, что в указанном списке типов данных, и — это примитивные типы в JavaScript, которые содержат ровно одно значение. Вы уже наверно начали задаваться вопросом, а как же массивы, функции, регулярные выражения и прочие вещи? Все это специальные виды объектов
Вы уже наверно начали задаваться вопросом, а как же массивы, функции, регулярные выражения и прочие вещи? Все это специальные виды объектов.
- — специальный вид объектов, который представляет собой упорядоченную коллекцию пронумерованных значений со специальным синтаксисом и характеристиками, что отличает работу с ним от работы с другими объектами
- — специальный вид объектов, содержащий исполняемый сценарий, который выполняется при вызове функции. Этот вид объектов также имеет специальный синтаксис и характеристики, отличающие работу с ним от работы с другими объектами
JavaScript содержит несколько конструкторов для создания и других различных объектов, например, таких как:
- — для создания объектов даты
- — для создания регулярных выражений
- — для создания JavaScript ошибок
Window
Window Object
alert()
atob()
blur()
btoa()
clearInterval()
clearTimeout()
close()
closed
confirm()
console
defaultStatus
document
focus()
frameElement
frames
history
getComputedStyle()
innerHeight
innerWidth
length
localStorage
location
matchMedia()
moveBy()
moveTo()
name
navigator
open()
opener
outerHeight
outerWidth
pageXOffset
pageYOffset
parent
print()
prompt()
resizeBy()
resizeTo()
screen
screenLeft
screenTop
screenX
screenY
scrollBy()
scrollTo()
scrollX
scrollY
sessionStorage
self
setInterval()
setTimeout()
status
stop()
top
Window Console
assert()
clear()
count()
error()
group()
groupCollapsed()
groupEnd()
info()
log()
table()
time()
timeEnd()
trace()
warn()
Window History
back()
forward()
go()
length
Window Location
assign()
hash
host
hostname
href
origin
pathname
port
protocol
reload()
replace()
search
Window Navigator
appCodeName
appName
appVersion
cookieEnabled
geolocation
javaEnabled()
language
onLine
platform
product
taintEnabled()
userAgent
Window Screen
availHeight
availWidth
colorDepth
height
pixelDepth
width
jQuery — Событие загрузки (load)
Событие браузер генерирует элементу, когда он и все вложенные в него элементы были полностью загружены. Данное событие предназначено только для элементов, в которых присутствует URL: , , и .
Например, выполнить функцию, когда страница будет полностью загружена (включая картинки):
$(window).on('load', function() {
// действия после полной загрузки страницы...
});
Например, выведем сообщение в консоль, когда указанное изображение будет загружено:
<img id="image" src="image.png">
...
<script>
$('#image').on('load', function() {
console.log('Изображение загружено');
});
</script>
Объект переключатель в javascript — radio и свойство checked
Элемент javascript предназначен для выбора только одного единственного варианта из нескольких.
Для того, чтобы несколько переключателей работали сгруппировано, т.е. чтобы при выборе одного radio все остальные бы отключались, необходимо для всех radio установить одинаковое значение атрибута
Рассмотрим пример использования радиокнопок:
html-код:
<body> <form name="f1"> Ваш пол:<br> <input type="radio" name="r1" id="id1">м<br> <input type="radio" name="r1" id="id2">ж<br> <input type="button" onclick="fanc()"> <form> <body> |
Группа радиокнопок (radio) идентифицируется в скрипте следующим образом:
Скрипт:
function fanc(){
document.getElementById("id1").checked=true; // 1-й способ
document.f1.r1.checked=true; // 2-й способ
document.f1'r1'.checked=true; // 3-й способ
}
|
Первый способ является наиболее предпочтительным.
Рассмотрим пример использования в javascript с свойством:
Пример: По щелчку на кнопке устанавливать первый переключатель отмеченным
1 способ:
Скрипт:
function fanc(){
idr1.checked=true;
}
|
HTML-код:
<input type="radio" name="r1" id="idr1">пункт1<br> <input type="radio" name="r1" id="idr2">пункт1<br> <input type="button" onClick ="fanc()" value="отметить"> |
2 способ:
Скрипт:
function fanc(){
document.f1.r1.checked=true;
}
|
HTML-код:
<form name="f1"> <input type="radio" name="r1">пункт1<br> <input type="radio" name="r1">пункт1<br> <input type="button" onClick ="fanc()" value="отметить"> <form> |
Задание js12_2.
Создать страницу проверки знаний учащегося с вопросом: «Какой заряд у электрона?» и двумя ответами: «положительный» (неправильный) и «отрицательный» (правильный). Осуществить проверку правильности отмеченного при помощи элемента формы ответа. Функцию проверки запускать 
JavaScript
JS Array
concat()
constructor
copyWithin()
entries()
every()
fill()
filter()
find()
findIndex()
forEach()
from()
includes()
indexOf()
isArray()
join()
keys()
length
lastIndexOf()
map()
pop()
prototype
push()
reduce()
reduceRight()
reverse()
shift()
slice()
some()
sort()
splice()
toString()
unshift()
valueOf()
JS Boolean
constructor
prototype
toString()
valueOf()
JS Classes
constructor()
extends
static
super
JS Date
constructor
getDate()
getDay()
getFullYear()
getHours()
getMilliseconds()
getMinutes()
getMonth()
getSeconds()
getTime()
getTimezoneOffset()
getUTCDate()
getUTCDay()
getUTCFullYear()
getUTCHours()
getUTCMilliseconds()
getUTCMinutes()
getUTCMonth()
getUTCSeconds()
now()
parse()
prototype
setDate()
setFullYear()
setHours()
setMilliseconds()
setMinutes()
setMonth()
setSeconds()
setTime()
setUTCDate()
setUTCFullYear()
setUTCHours()
setUTCMilliseconds()
setUTCMinutes()
setUTCMonth()
setUTCSeconds()
toDateString()
toISOString()
toJSON()
toLocaleDateString()
toLocaleTimeString()
toLocaleString()
toString()
toTimeString()
toUTCString()
UTC()
valueOf()
JS Error
name
message
JS Global
decodeURI()
decodeURIComponent()
encodeURI()
encodeURIComponent()
escape()
eval()
Infinity
isFinite()
isNaN()
NaN
Number()
parseFloat()
parseInt()
String()
undefined
unescape()
JS JSON
parse()
stringify()
JS Math
abs()
acos()
acosh()
asin()
asinh()
atan()
atan2()
atanh()
cbrt()
ceil()
clz32()
cos()
cosh()
E
exp()
expm1()
floor()
fround()
LN2
LN10
log()
log10()
log1p()
log2()
LOG2E
LOG10E
max()
min()
PI
pow()
random()
round()
sign()
sin()
sinh()
sqrt()
SQRT1_2
SQRT2
tan()
tanh()
trunc()
JS Number
constructor
isFinite()
isInteger()
isNaN()
isSafeInteger()
MAX_VALUE
MIN_VALUE
NEGATIVE_INFINITY
NaN
POSITIVE_INFINITY
prototype
toExponential()
toFixed()
toLocaleString()
toPrecision()
toString()
valueOf()
JS OperatorsJS RegExp
Modifiers:
g
i
m
Groups:
(x|y)
Metacharacters:
.
\w
\W
\d
\D
\s
\S
\b
\B
\0
\n
\f
\r
\t
\v
\xxx
\xdd
\uxxxx
Quantifiers:
+
*
?
{X}
{X,Y}
{X,}
$
^
?=
?!
Properties:
constructor
global
ignoreCase
lastIndex
multiline
source
Methods:
compile()
exec()
test()
toString()
JS Statements
break
class
const
continue
debugger
do…while
for
for…in
for…of
function
if…else
let
return
switch
throw
try…catch
var
while
JS String
charAt()
charCodeAt()
concat()
constructor
endsWith()
fromCharCode()
includes()
indexOf()
lastIndexOf()
length
localeCompare()
match()
prototype
repeat()
replace()
search()
slice()
split()
startsWith()
substr()
substring()
toLocaleLowerCase()
toLocaleUpperCase()
toLowerCase()
toString()
toUpperCase()
trim()
valueOf()
Пример: проверка чекбокса с помощью JavaScript
Если вы не хотите использовать jQuery для проверки состояния чекбокса и выполнения на ее основе различных действий, можно воспользоваться JavaScript.
В приведенном ниже примере для получения состояния чекбокса мы используем свойство JavaScript getElementById. Если чекбокс отмечен, показывается кнопка, если нет — кнопка скрывается:
Посмотреть демо и код онлайн
Полный код примера:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet"href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<style>
.divcls
{
width:200px;
height: 80px;
padding:20px;
background-color:#4D9999;
color:#fff;
font-size:15px;
}
</style>
</head>
<body>
<div class="divcls"><input type="checkbox" checked id="demochecked"/>Show/Hide button</div>
<br />
<div class="col-sm-offset-2 col-sm-5" id="chkboxdemo">
<p><input type="submit" class="btn btn-lg btn-danger" value="Save Information"></p>
</div>
<script>
var chkstatus = document.getElementById('demochecked');
var btnshowhide = document.getElementById('chkboxdemo');
chkstatus.onchange = function() {
btnshowhide.hidden = this.checked ? false : true;
};
</script>
</body>
</html>
В примере, приведенном выше, JavaScript-код для jQuery checkbox checked проверки и скрытия/показа кнопки расположен над тегом </body>. В нём можно использовать ссылки, кнопки, параграфы, div и другие элементы.
Наконец-то формы!Скопировать ссылку
jQuery-плагин для валидации форм был стабильным плагином с первых дней jQuery, и честно сделал работу с формами намного проще.
Но вне зависимости от валидации на стороне клиента все равно нужно проводить валидацию на стороне сервера — это необходимо в любом случае, какую бы валидацию вы ни делали.
Но что, если можно было бы выбросить кучу строк JavaScript и плагинов и валидировать эл. адрес как-то так:
Хотите сделать его обязательным полем?
Хотите разрешать пользователю вводить только определенные символы?
Неплохо. Здесь даже есть поддержка вспомогательных технологий — например, клавиатура на мобильных устройствах адаптируется и будет выводить символы для эл. адреса.
Так как все эти типы полей при отсутствии в браузере поддержки просто становятся текстовыми полями, и раз уж вам все равно нужно делать валидацию на сервере, я бы на вашем месте выкинул всю JavaScript-валидацию и заменил ее на встроенную в браузеры валидацию HTML5-форм.
Пример: использование метода $.on jQuery для проверки состояния чекбокса
В примере выше мы используем событие $.click напрямую. Можно также воспользоваться методом $.on с событием change для работы с чекбоксом.
В демо мы сделали HTML-таблицу, скрывающуюся в зависимости от состояния чекбокса. Здесь снова используется метод toggle — если таблица видима, она скрывается и наоборот:
Посмотреть демо и код онлайн
Полный код примера, включая HTML, jQuery и CSS:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#demochecked").on("change", function(){
$("#chkshowhide").toggle(this.checked);
});
});
</script>
<style>
.divcls
{
padding:20px;
background-color:#000080;
color:#fff;
font-size:15px;
}
/* таблицы*/
.demotbl {
border-collapse: collapse;
border: 1px dashed #859FB1;
}
.demotbl th{
border: 2px solid #96ADBC;
color: #3E5260;
padding:10px;
}
.demotbl td{
border: 1px dotted #232F36;
color: #002F5E;
padding:15px;
width:100px;
}
</style>
</head>
<body>
<div class="divcls"><input type="checkbox" name="mycheckbox" checkedid="demochecked"/>Show/Hide HTML Table</div>
<br />
<table class="demotbl" id="chkshowhide">
<tr>
<th>Product ID</th>
<th>Product Name</th>
<th>Product Quality</th>
<th>Product Quantity</th>
</tr>
<tr>
<td>prod-1</td>
<td>Wheat</td>
<td>Good</td>
<td>333 Bags</td>
</tr>
<tr>
<td>prod-2</td>
<td>Rice</td>
<td>Good</td>
<td>111 Bags</td>
<tr>
<td>prod-3</td>
<td>Sugar</td>
<td>Good</td>
<td>1200 Bags</td>
</tr>
</table>
</body>
</html>
Как видим, результат jQuery checkbox checked установки такой же, как и в первом примере.
Пожалуйста, оставляйте ваши мнения по текущей теме статьи. Мы крайне благодарны вам за ваши комментарии, отклики, дизлайки, подписки, лайки!
МКМихаил Кузнецовавтор-переводчик статьи «How to know if checkbox is checked by jQuery/JavaScript?»
Вешаем onclick на элемент из javascript-кода
Рассмотим еще один способ, на мой взгляд, самый практичный и надежный. Хорош он тем, что событие можно повесить на множество элементов. Для этого требуется выбрать при помощи javascript-селекторов элементы, к которым требуется применить событие onclick.
Код в действии:
Нажмите на ссылку:
Выбору элементов по селекторам можно посвятить отдельную тему, могу сказать только то, что согласно новой спецификации HTML5, их выбор стал прост и в javascript. Если Вы знакомы с jquery или CSS, то выбрать нужные элементы для Вас не составит труда. Например, так просто можно выбрать все элементы с классом «link» и повесить на них нужное действие:
//выбираем нужные элементы
var a = document.querySelectorAll('.link');
//перебираем все найденные элементы и вешаем на них события
[].forEach.call( a, function(el) {
//вешаем событие
el.onclick = function(e) {
//производим действия
}
});
В каких случаях я всегда использую jQueryСкопировать ссылку
Прежде чем я расскажу о том, как я могу обходиться без jQuery, быть «нагим» — давайте я расскажу о случаях, когда я точно включаю jQuery в проект. Есть несколько довольно специфических причин, которые заставляют меня либо начинать прямо с jQuery, либо переключаться на нее с какого-то специально написанного решения.
Перед этим я должен оговориться относительно случая, когда я абсолютно точно не использую jQuery: если я пытаюсь воспроизвести баг в браузере, я никогда не использую библиотеку. Если вы пытаетесь найти баг, чтобы можно было сообщить о проблеме, необходимо, чтобы в примере было как можно меньше кода (конечно, кроме тех случаев, когда вы отправляете сообщение об ошибке внутри jQuery!).
1. Когда проект должен работать в устаревших браузерахСкопировать ссылку
BBC достаточно четко озвучили, что именно они называют современным браузером, и по некотором размышлении это и есть тот признак, по которому я решаю, включать jQuery по умолчанию или нет.
Если я знаю, что я должен работать с несовременными браузерами, и они составляют часть ядра аудитории, то я начну с jQuery внутри своего кода.
Что значит «современный»? По большому счету, ответ простой: поддерживает ли браузер ? BBC применяет следующий тест на соответствие требованию современности:
Я знаю наизусть, что IE8 не поддерживает (хотя и существует полифил), так что, если поддержка этого браузера важна для проекта, я понимаю, что не хочу начинать проект с хаков для IE8.
Не то чтобы я хочу сказать, что те проекты, которые я начинаю без jQuery, не будут поддерживать IE8. Скорее — что нужно начинать с малого и делать разработку простой с самого начала. Если я начну проект с охапки хаков — проблем не оберёшься.
И еще я считаю это тем случаем, «когда сложность перевешивает простоту».
2. Когда я делаю что-то дешево и сердитоСкопировать ссылку
Если я создаю какой-то концепт, тестирую идею или просто что-то набрасываю и отправляю в JS Bin, обычно я просто добавляю jQuery по умолчанию. Так мне не приходится лишний раз думать.
Без jQuery!Скопировать ссылку
Наверное, вы думаете: «Так, Реми использует jQuery, а если нет, то просто переписывает все фичи сам?»
Я совершенно не хочу изобретать велосипед. Если я обнаруживаю, что, разрабатывая без jQuery, я в итоге сам переписываю с нуля ее функциональность, тогда, ясное дело, я просто трачу свое время впустую.
Нет, всё не так. Просто есть довольно много сценариев, в которых я буду писать код своего приложения без библиотеки, опираясь на встроенные в браузер технологии. Если какая-то часть этих технологий не поддерживается в том или ином браузере, я могу прибегнуть к полифилам — но только после тщательного рассмотрения и понимания, что это имеет смысл.
Итак, как я живу без jQuery, и насколько полной можно считать поддержку нужных технологий в браузерах?
