{"id":12,"date":"2023-08-25T17:32:28","date_gmt":"2023-08-25T17:32:28","guid":{"rendered":"\/\/api.jquerymobile.com\/1.3\/?p=12"},"modified":"2023-08-25T17:32:28","modified_gmt":"2023-08-25T17:32:28","slug":"checkboxradio","status":"publish","type":"post","link":"https:\/\/api.jquerymobile.com\/1.3\/checkboxradio\/","title":{"rendered":"Checkboxradio Widget"},"content":{"rendered":"

\nCheckboxradio Widget<\/span>version added: 1.0<\/span>\n<\/h2>\n
\n

Description: <\/strong>Creates a checkboxradio widget<\/p>\n

QuickNavExamples<\/a>\n<\/h2><\/header>
\n

Options<\/h3>\n
mini<\/a><\/div>\n
theme<\/a><\/div>\n<\/div>\n
\n

Methods<\/h3>\n
disable<\/a><\/div>\n
enable<\/a><\/div>\n
refresh<\/a><\/div>\n<\/div>\n
\n

Events<\/h3>\n
create<\/a><\/div>\n<\/div><\/section>
\n\t\t

Checkboxes<\/h2>\n\t\t

Checkboxes are used to provide a list of options where more than one can be selected. Traditional desktop checkboxes are not optimized for touch input so in jQuery Mobile, we style the label<\/code> for the checkboxes so they are larger and look clickable. A custom set of icons are added to the label to provide additional visual feedback. <\/p>\n\t\t

The checkbox controls below use standard input\/label markup, but are styled to be more touch-friendly. The styled control you see is actually the label element, which sits over the real input, so if images fail to load, you'll still have a functional control. In most browsers, clicking the label automatically triggers a click on the input, but we've had to trigger the update manually for a few mobile browsers that don't do this natively. On the desktop, these controls are keyboard and screen-reader accessible.<\/p>\n\t\t

To create a single checkbox, add an input<\/code> with a type="checkbox"<\/code> attribute and a corresponding label<\/code>. If the input<\/code> isn’t wrapped in its corresponding label<\/code>, be sure to set the for<\/code> attribute of the label<\/code> to match the id<\/code> of the input<\/code> so they are semantically associated.<\/p>\n\n

\n\t\n\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\t\t
1<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t
2<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t
3<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t
4<\/div>\n\t\t\t\t\t\n\t\t\t\t<\/td>\n\t\t\t\t\n\t\t\t\t
\n\t\t\t\t\t
<label<\/span>><\/span><input<\/span> type<\/span>="checkbox"<\/span> name<\/span>="checkbox-0"<\/span>><\/span> I agree <\/label<\/span>><\/span><\/code><\/div><\/div>
 <\/code><\/div><\/div>
<input<\/span> type<\/span>="checkbox"<\/span> name<\/span>="checkbox-1"<\/span> id<\/span>="checkbox-1"<\/span> class<\/span>="custom"<\/span>><\/span><\/code><\/div><\/div>
<label<\/span> for<\/span>="checkbox-1"<\/span>><\/span>I agree<\/label<\/span>><\/span><\/code><\/div><\/div><\/pre>\n\t\t\t\t<\/td>\n\t\t\t<\/tr>\n\t\t<\/tbody>\n\t<\/table>\n<\/div>\n\n\t\t
The above snippets will produce two basic checkboxes. The default styles will set the width of the element to 100% of the parent container.\n\t\t