Checked files

Customizing

Custom Styles

You can add custom styles to the check boxes and radios by simply adding a class to the checkbox
or radio input and targeting it within the css. All classes added to the input will be applied
to
the container that the plugin creates to display the new customised checkbox and radio.

To add custom styling, create a css class like this:

.custom-style{
    
    font-size:50px;
    color:#6CF;
    border:2px solid #6CF;
	
    -webkitbox-shadow:inset 0px 0.1em 0.1em rgba(,,,0.3);
    -moz-box-shadow:inset 0px 0.1em 0.1em rgba(,,,0.3);
    box-shadow:inset 0px 0.1em 0.1em rgba(,,,0.3);
	
}

Note: Increasing and decreasing the font size is the best way to adjust the size

Then add the style to the inputs:

input type="checkbox" class="checkradios custom-style" checked/>
input type="radio" class="checkradios custom-style" checked/>

When you instantiate the plugin:

$(document).ready(function(){

    $('.checkradios').checkradios();

});

This should be the outcome:

Note: You can also customise the styles using the and classes in the main jquery.checkradios.css file. From the jquery.checkradios.css css file you can also target the tick and the circle icons from the and classes.

Using FontAwesome Font Icons

CSS

Include the css for FontAwesome using their CDN:

link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
link rel="stylesheet" href="/jquery-checkradios/css/jquery.checkradios.min.css"/>
html
input type="checkbox" class="checkboxes-and-radios" checked/>
input type="radio" class="checkboxes-and-radios" checked/>
Javascript
$('.checkboxes-and-radios').checkradios({
	
    checkbox {
		
                iconClass'fa fa-check-circle'
		
    },
		
    radio {
		
                iconClass'fa fa-star'
		
    }
	
	
});

Note: Be sure to also add the «fa» FontAwesome class before the icon name you have chosen.

This should be the outcome:

Using Icomoon Font Icons

To setup the icomoon icons do the following:

  1. Once you have selected the icons you wish to use, download them and add the contents to your sites folder.
  2. Include the style.css file on your page.
  3. Then in your javascript do the following:
$('.checkboxes-and-radios').checkradios({
	
    checkbox {
		
                iconClass'the-name-of-your-icomoon-class-for-checkboxes'
		
    },
		
    radio {
		
                iconClass'the-name-of-your-icomoon-class-for-radios'
		
    }
	
	
});

Alternatively you can copy the contents of the style.css provided by icomoon and instead paste it into the jquery.checkradios.css file, replacing the icomoon section at the top (Make sure to set the paths properly to the font files, if overriding the default fonts add your font files to css/fonts within the plugin folder), this would allow you to skip «Step 3» listed above. If choosing to copy and paste into the query.checkradios.css file if you change the names of your icons to and this will override the default font classes which will allow you to also skip «Step 4» listed above

Видео с похожими ключевыми словами

fonfonefonovyi riezhimkontiekstobrazovaniiepodghotovkapodopliokapriedposylkapriedystoriiaproiskhozhdieniiezadnii planбэкграундзадний планконтекстобразованиеподготовкаподоплёкапредпосылкапредысторияпроисхождениефонфоновыйфоновый режимфоновый рисунокbuksiashchikkabinakorobkalozhamandasamshitбукскабинакоробкаложасамшитящикbizniesdielopriedpriiatiierabotazaniatiieбизнесделоделовойзанятиепредприятиеработаghalochkaklietkaprovieriatprovieritprovierkarasplatit siaschiotshakhгалочкаклеткапроверитьпроверкапроверятьрасплатитьсясчётcheckboxchiek boksflazhokфлажокчек бокспереченьчеклистvyborвыборchoosingkliientkliientkazakazchikzakazchitsaзаказчикзаказчицаклиентклиенткаконец вверхkontsieptsiiaponiatiiepriedstavlieniieидеяконцептконцепцияпонятиепредставлениепринципиальная схемаrieshieniieurieghulirovaniieрешениеурегулированиеchiertiezhпритяжкарисованиечертежvyboryвыборыизбраниеnachinkanapolnieniieplombaзавалканаполнениеначинкапломбаankietablankfighuraformaformirovatformovatformuliarpridavat formuанкетабланкпридавать формуфигураформаформироватьформоватьформулярgraphicilliustratsiiaиллюстрацияinformatsiiaинформацияrieghistrirovatsostavliat spisokspisokрегистрироватьсоставлять списоксписокmarkmarkamarkirovatmietkaznakзнакмаркмаркамаркироватьметкашрамmarkermnieniieмнениеnumierovatpazhprolistyvatstranitsaнумероватьпажпролистыватьстраницаbumaghabumazhnyiбумагабумажныйavtoruchkaliebiodkaliebiodushkanapisatpieropisatruchkazaghonzakliuchatzapiratавторучказагонзаключатьзапиратьлебёдкалебёдушканаписатьперописатьручкаizbiratiel nyi punktizbiratiel nyi uchastokoprosизбирательный пунктизбирательный участокопроссписок избирателейdoprashivatdoprositrassprashivatrassprositvoprosвопросвопросадопрашиватьдопроситьрасспрашиватьрасспроситьвопросникkrasnokrasnyiryzhaiaryzhieieryzhiiкраснаякраснокрасноекрасныекрасныйрыжаярыжеерыжийdokladiavliat siaotchiotraportrieportazhsoobshchatsoobshchieniiesoobshchitsvodkaдокладотчетотчётрапортрепортажсводкасообщатьсообщениесообщитьявлятьсяotbiratотбиратьотборноotborpodborkavyborkaвыборкаотборподборкаpodpisatpodpisat siapodpisyvat iapodpisyvat siavyvieskaвывескаподписатьподписатьсяподписыватьсяподписыватьяsurveyembliemasimvolсимволэмблемаchiekholklieshchmghnovieniiemighnavolochkaotmiechat ghalochkoiptichkatikan ietikattiknutudarклещмгновениемигнаволочкаотмечать галочкойптичкатиканиетиканьетикатьтикнутьударчехолgholosgholosovaniiegholosovatprogholosovatvotumвотумголосголосованиеголосоватьпроголосоватьbielobielokbielyibielyi tsvietбелобелоебелокбелыебелыйбелый цветобработкаnapishitiezapisatzapisyvatзаписатьзаписыватьнапишите

Видео с похожими ключевыми словами

предпосылкиbox — containerbizniesdielopriedpriiatiierabotazaniatiieбизнесделоделовойзанятиепредприятиеработаконтрольнаяа пометкаcheckboxchiek boksflazhokghalochkaгалочкафлажокчек бокспереченьчеклистvyborвыборclose upcontour drawingkliientkliientkaклиентклиенткаrieshieniiaрешенияdiekoratsiianaghradaukrashieniieдекорациянаградаоформлениеукрашениеdrawing — activityexamfilm negativeпрогнозированиеankietablankfighuraformaformirovatformovatformuliarpridavat formuанкетабланкпридавать формуфигураформаформироватьформоватьформулярform fillingidieiидеиilliustratsiiaиллюстрацияrieghistrirovatsostavliat spisokspisokрегистрироватьсоставлять списоксписокmacrophotographnumierovatpazhprolistyvatstranitsaнумероватьпажпролистыватьстраницаbumaghabumazhnyiбумагабумажныйliekalomodielobrazietsprimierrisunokshablonskhiematrafarietuzorzakonomiernostартзакономерностьлекаломодельобразецпаттернпаттерныпримеррисуноксхематрафаретузоршаблонavtoruchkaliebiodkaliebiodushkanapisatpieropisatruchkazaghonzakliuchatzapiratавторучказагонзаключатьзапиратьлебёдкалебёдушканаписатьперописатьручкаkarandashкарандашpolitics and governmentpolling placevoprositiel nyi znakznak voprosaвопросительный знакзнак вопросавопросникkrasnokrasnyiryzhaiaryzhieieryzhiiкраснаякраснокрасноекрасныекрасныйрыжаярыжеерыжийrefusingotvierghatотвергатьdokladiavliat siaotchiotraportrieportazhsoobshchatsoobshchieniiesoobshchitsvodkaдокладотчетотчётрапортрепортажсводкасообщатьсообщениесообщитьявлятьсяscientific experimentpodpisatpodpisat siapodpisyvat iapodpisyvat siavyvieskaznakвывесказнакподписатьподписатьсяподписыватьсяподписыватьяrastvorrieshieniieрастворрешениеkvadratkvadratnyiobyvatielploshchadpolieskvierughol nikквадратквадратныйобывательплощадьполескверугольникghieodiezisttopoghrafziemliemierгеодезистземлемерсъемщиктопографembliemasimvolсимволэмблемаesemeskamiessiedzhtiekstмесседжсмстекстэсэмэскаchiekholklieshchmghnovieniiemighnavolochkaotmiechat ghalochkoiptichkatikan ietikattiknutudarклещмгновениемигнаволочкаотмечать галочкойптичкатиканиетиканьетикатьтикнутьударчехолvariationgholosgholosovaniiegholosovatprogholosovatvotumвотумголосголосованиеголосоватьпроголосоватьvoting boothwhite colorобработкаписьменныйсочинительство

Introduction

This jQuery plugin was designed to allow you to fully customize checkboxes and radios without using standard images and with scalability in mind. Most plugins I have come across use images such as jpegs and pngs to add custom checkbox ticks and radio circles. This plugin instead uses vector based icons/fonts to add in the ticks and circles which allows far greater customisation as well as scalability and ultimately much greater control over the checkboxes and radios using css.

This plugin uses custom icons provided by icomoon (icomoon.io) for its ticks and radios circles built in by default however it is also compatible with other font based icons platforms such as FontAwesome.

Not the answer you’re looking for? Browse other questions tagged jquery checkbox if-statement or ask your own question.

The Overflow Blog

How to develop a defensive plan for your open-source software project

Coming together as a community to connect

Featured on Meta

The Q1 2020 Community Roadmap is on the Blog

An Update On Creative Commons Licensing

Community and Moderator guidelines for escalating issues via new response…

Triage needs to be fixed urgently, and users need to be notified upon…

How does the Triage queue work?

Linked

2

jquery checkbox checked property and ternary operator

-2

how to identify if checkbox is checked ajax?

-1

How do I determine if a checkbox is checked to do something, then unchecked do something else?

-2

jquery issue with chekbox

Checkbox value cannot be changed based on check or unchecked using jquery

1153

Check if checkbox is checked with jQuery

Javascript validation code to make sure that at least one checkbox is marked

1

how to enable button only after select box and checkbox

1

How to validate checkboxes in particular div using JQuery?

JQuery hide\show if checkbox is checked

see more linked questions…

Hot Network Questions

  • What are the implications of the EARN IT Act?

  • How can we handle work-from-home requests from trainees/freshers in this coronavirus pandemic?

  • Does a ranged casting distance include touch?

  • Why is Rorschach’s mask symmetrical?

  • ShellCheck is carping that my expression is not in double quotes when it really is; why?

  • When use setq or set ‘

  • Can one use a whole note to span a full 5/4 measure?

  • No electrical to the dashboard after attempting jumpstart with Schumacher charger

  • Penta-decker Vowelburger #2

  • Why would the offspring of a clone not suffer from a degenerative illness?

  • Tense and conjugation: いないみたいでした v.s. いなかったみたいでした

  • Why would a B-29 consume more fuel at 17 kft than at 9 kft?

  • Embedding Klein bottles in 4-space

  • KoTH: Highest HP is Eliminated!

  • How to check how much water my dishwasher is using?

  • Calculating row-wise time difference in python

  • Mother milk of 6 Corona-positive (COVID-19) women does not contain the virus — can we make a confidence statement about this?

  • Andrew’s House Cleaning — A Word Ladder

  • Can Prestidigitation create medical gloves?

  • Why would a very advanced Transhumanist Civilization ever need to have a military or wage wars?

  • RFC6979: error in reference implementation?

  • SQL estimates are way off on DELETE statement with Triggers on huge tables

  • I am yet to grow old

  • If usbfs has been deprecated, then why is /sys/bus/usb/drivers/usbfs directory present?

Question feed

Stack Overflow works best with JavaScript enabled

Changelog

January 23, 2014 (v2.0 release candidate)

  • Three ways to set an options: global object (), data attributes (
  • Huge performance boost (takes less than 1s to customize 1000 inputs)
  • Minimized number of function calls (some slow jQuery functions are replaced with a faster vanilla alternatives without using any dependencies)
  • AMD module definition support (both for jQuery and Zepto)
  • Unblocked native events — iCheck 2.x doesn’t stop your newly or past binded events from being processed
  • Pointer events support — full support for phones and tablets that use Windows OS (such as Lumia, HP tablets, desktops with a touch screen, etc)
  • WebOS and Firefox OS support
  • New methods: to get all the options were used for customization (also stores a current states values — , and ), to get a wrapper div (that’s used for customization)
  • Better handling of the state
  • Ability to set callbacks in three ways: global object, direct JavaScript object or using bind method ()
  • Ability to switch off some of the callbacks when you don’t need them (global or per input)
  • Inline styles dropped — iCheck won’t add any inline styles to the elements until it’s highly needed ( or option)
  • Fast click support — removes a 300ms click delay on mobile devices without any dependencies (iCheck compatible with the plugin), see the option
  • Ability to ignore customization for the selected inputs using option (if set to )
  • Optimized event bindings — iCheck binds only a few global events for the all inputs (doesn’t increase on elements addition), instead of a couple for the each customized element
  • Doesn’t store tons of arbitrary data (event in jQuery or Zepto cache), defines customized elements by specific classnames
  • Extra tag is dropped (less DOM modifications), iCheck wraps each input with a single and doesn’t use any extra markup for the any option
  • Optimized reflows and repaints on init and state changes
  • Better options handling — iCheck will never run a single line of JS to process an options that are off or empty
  • Ability to auto customize the ajax loaded inputs without using any extra code ( option, on by default)
  • Auto inits on domready using the specified selector ( option) — searches for by default. Classnames can be changed using the object
  • Memory usage optimization — uses only a few amount of memory (works well on low-memory devices)
  • Betters callbacks architecture — these are fired only after changes are applied to the input
  • Ability to set a mirror classes between the inputs and assigned labels using the , , , , and options ( option should be set to to make this happen)
  • Fixes some issues of the mobile devices
  • Fixes the issues of the wrapper labels, that loose a click ability in some browsers (if no attribute is set)
  • Some other options and improvements
  • Various bug fixes

Note: extended docs and usage examples will be available later.

December 18, 2013

  • Added ARIA attributes support (for VoiceOver and others) @myfreeweb
  • Added Amazon Kindle support @skinofstars
  • Fixed clickable links inside labels @LeGaS
  • Fixed lines separation between labels and inputs
  • Merged two versions of the plugin (jQuery and Zepto) into one
  • Fixed demo links
  • Fixed callbacks @PepijnSenders

How it works

For this HTML:

label>
  input type="checkbox" name="quux" disabled>
  Foo
label>

label for="baz">Barlabel>
input type="radio" name="quux" id="baz" checked>

label for="baz">Barlabel>
input type="radio" name="quux" id="baz">

With default options you’ll get nearly this:

label>
  div class="icheckbox disabled">
    input type="checkbox" name="quux" disabled>
  div>
  Foo
label>

label for="baz">Barlabel>
div class="iradio checked">
  input type="radio" name="quux" id="baz" checked>
div>

label for="baz">Barlabel>
div class="iradio">
  input type="radio" name="quux" id="baz">
div>

Пример: как показать div, если отмечен чекбокс

В

этом примере jQuery checkbox set checked («отмечен») — когда он отмечен, отображается элемент div. Если убрать отметку, div пропадает:

Посмотреть демо и код онлайн

Полный код примера:

jQuery checked demo

Tick / Uncheck the checkbox

The checkbox is checked!!

В примере выше мы используем событие click для чекбокса и метод toggle, чтобы скрывать или показывать div. Используя jQuery, сделать это предельно просто. Рассмотрим ещё один пример.

Пример: как показать/скрыть веб-форму в зависимости от состояния чекбокса

В этом примере мы используем для jQuery input checkbox checked событие change. Когда ставится или убирается галочка, исполняется соответствующий код.

В демо, ссылка на который приведена ниже, мы скрываем элемент div, содержащий веб-форму. Форма сделана при помощи встроенных классов Bootstrap, поэтому вместе со ссылкой на библиотеку jQuery в разделе

CSS-файл Bootstrap

Отметьте или уберите галочку с чекбокса, чтобы скрыть или показать веб-форму. Для этого используются методы $.show и $.hide:

Посмотреть демо и код онлайн

Полный код примера:

jQuery checkbox check/uncheck demo with a form

Create Account? Yes / No

Fill in the form below for creating account

Обратите внимание, как происходит jQuery checkbox checked проверка, и реализуются условия if/else для показа или скрытия формы

Пример: проверка чекбокса с помощью JavaScript

Если вы не хотите использовать jQuery для проверки состояния чекбокса и выполнения на ее основе различных действий, можно воспользоваться JavaScript.

В приведенном ниже примере для получения состояния чекбокса мы используем свойство JavaScript getElementById. Если чекбокс отмечен, показывается кнопка, если нет — кнопка скрывается:

Посмотреть демо и код онлайн

Полный код примера:

 

 

Show/Hide button
 
  
 
        

В примере, приведенном выше, JavaScript-код для jQuery checkbox checked проверки и скрытия/показа кнопки расположен над тегом . В нём можно использовать ссылки, кнопки, параграфы, div и другие элементы.

Пример: использование метода $.on jQuery для проверки состояния чекбокса

В примере выше мы используем событие $.click напрямую. Можно также воспользоваться методом $.on с событием change для работы с чекбоксом.

В демо мы сделали HTML-таблицу, скрывающуюся в зависимости от состояния чекбокса. Здесь снова используется метод toggle — если таблица видима, она скрывается и наоборот:

Посмотреть демо и код онлайн

Полный код примера, включая HTML, jQuery и CSS:

 

 

Show/Hide HTML Table
 
Product ID Product Name Product Quality Product Quantity
prod-1 Wheat Good 333 Bags
prod-2 Rice Good 111 Bags
prod-3 Sugar Good 1200 Bags

Как видим, результат jQuery checkbox checked установки такой же, как и в первом примере.

Данная публикация представляет собой перевод статьи «How to know if checkbox is checked by jQuery/JavaScript?» , подготовленной дружной командой проекта Интернет-технологии.ру

Copyright and license

The MIT License (MIT)

Copyright (c) 2013 Qodio

Permission is hereby granted, free of charge, to any person obtaining a copy of
this software and associated documentation files (the «Software»), to deal in
the Software without restriction, including without limitation the rights to
use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
the Software, and to permit persons to whom the Software is furnished to do so,
subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED «AS IS», WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

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()
cos()
cosh()
E
exp()
floor()
LN2
LN10
log()
LOG2E
LOG10E
max()
min()
PI
pow()
random()
round()
sin()
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
constructor
compile()
exec()
g
global
i
ignoreCase
lastIndex
m
multiline
n+
n*
n?
n{X}
n{X,Y}
n{X,}
n$
^n
?=n
?!n
source
test()
toString()

(x|y)
.
\w
\W
\d
\D
\s
\S
\b
\B
\0
\n
\f
\r
\t
\v
\xxx
\xdd
\uxxxx

JS Statements
break
class
continue
debugger
do…while
for
for…in
for…of
function
if…else
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()

Install with spm

Recommended HTML

Radio-buttons:

label class="icr-label">
    span class="icr-item type_radio">span>
    span class="icr-hidden">input class="icr-input" type="radio" name="!group_name!" value="!radio_value_1!" />span>
    span class="icr-text">!radio_text_1!span>
label>
label class="icr-label">
    span class="icr-item type_radio">span>
    span class="icr-hidden">input class="icr-input" type="radio" name="!group_name!" value="!radio_value_2!" />span>
    span class="icr-text">!radio_text_2!span>
label>

Checkboxes:
label class="icr-label">
    span class="icr-item type_checkbox">span>
    span class="icr-hidden">input class="icr-input" type="radio" name="!group_name!" value="!checkbox_value_1!" />span>
    span class="icr-text">!checkbox_text_1!span>
label>
label class="icr-label">
    span class="icr-item type_checkbox">span>
    span class="icr-hidden">input class="icr-input" type="radio" name="!group_name!" value="!checkbox_value_2!" />span>
    span class="icr-text">!checkbox_text_1!span>
label>

Regular HTML

Create checkboxes and/or radio-buttons:

input type="radio" name="reading" value="0" id="reading_0" /> label for="reading_0">Very muchlabel>
input type="radio" name="reading" value="1" id="reading_1" /> label for="reading_1">Sometimeslabel>
input type="radio" name="reading" value="2" id="reading_2" /> label for="reading_2">Better watch movielabel>
input type="radio" name="reading" value="3" id="reading_3" /> label for="reading_3">Hate itlabel>

or

label>input type="radio" name="movies" value="0" /> Love themlabel>
label>input type="radio" name="movies" value="1" /> Like themlabel>
label>input type="radio" name="movies" value="2" /> Indifferentlabel>
label>input type="radio" name="movies" value="3" /> Hate themlabel>

or drop some checkboxes:

label>input type="checkbox" name="think" value="0" /> Selflabel>
label>input type="checkbox" name="think" value="1" /> Moneylabel>
label>input type="checkbox" name="think" value="2" /> Stufflabel>
label>input type="checkbox" name="think" value="3" /> Healthlabel>
label>input type="checkbox" name="think" value="4" /> Worklabel>
label>input type="checkbox" name="think" value="5" checked /> Restlabel>
label>input type="checkbox" name="think" value="6" disabled checked /> Sexlabel>

Initialize slider

// all on the page:
$("input, input").ionCheckRadio();

// or specific only:
$(".my_inputs").ionCheckRadio();

Success!

Ссылка на основную публикацию