Примеры использования селектора :checked с помощью jQuery
Селектор :checked
работает для чекбоксов, радио кнопок и для опций выпадающих списков (select
).
Чтобы получить только выбранные элементы в выпадающих списках (select
), нужно использовать селектор :selected
Определяем, сколько чекбоксов отмечено
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>checked demo</title> <style> div { color: red; } </style> <script src="https://code.jquery.com/jquery-1.10.2.js"></script> </head> <body> <form> <p> <input type="checkbox" name="newsletter" value="Hourly" checked="checked"> <input type="checkbox" name="newsletter" value="Daily"> <input type="checkbox" name="newsletter" value="Weekly"> <input type="checkbox" name="newsletter" value="Monthly" checked> <input type="checkbox" name="newsletter" value="Yearly"> </p> </form> <div></div> <script> var countChecked = function() { var n = $( "input:checked" ).length; $( "div" ).text( n + (n === 1 ? " is" : " are") + " checked!" ); }; countChecked(); $( "input[type=checkbox]" ).on( "click", countChecked ); </script> </body> </html>
Пример
See the Pen :checked Selector by Denis (@deniscreative) on CodePen.0
Определяем отмеченный элемент радио-кнопки
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>checked demo</title> <style> input, label { line-height: 1.5em; } </style> <script src="https://code.jquery.com/jquery-1.10.2.js"></script> </head> <body> <form> <div> <input type="radio" name="fruit" value="orange" id="orange"> <label for="orange">orange</label> </div> <div> <input type="radio" name="fruit" value="apple" id="apple"> <label for="apple">apple</label> </div> <div> <input type="radio" name="fruit" value="banana" id="banana"> <label for="banana">banana</label> </div> <div id="log"></div> </form> <script> $( "input" ).on( "click", function() { $( "#log" ).html( $( "input:checked" ).val() + " is checked!" ); }); </script> </body> </html>
Пример
See the Pen :checked Selector — Identify the checked radio input by Denis (@deniscreative) on CodePen.0
Loader — это иконка-спиннер, которая крутится, пока загружается ваша страница. Так то я против таких…
Постараюсь сделать краткую инструкцию по правильному использованию изображений на сайте. Речь пойдет не об элементах…
Добавим красивые стрелки для увеличения/уменьшения числа в инпуте, например, изменение количества товаров в корзине или…
В одном из проектов возле меню выводились небольшие иконки в формате svg, и нужно, чтобы…