{"id":382,"date":"2011-12-20T14:25:46","date_gmt":"2011-12-20T14:25:46","guid":{"rendered":"http:\/\/javascript-tutor.net\/index.php\/"},"modified":"2017-11-16T23:06:26","modified_gmt":"2017-11-16T23:06:26","slug":"lesson-20-checkboxes-javascript","status":"publish","type":"page","link":"https:\/\/javascript-tutor.net\/index.php\/lesson-20-checkboxes-javascript\/","title":{"rendered":"JavaScript Lesson 20: JavaScript Checkbox"},"content":{"rendered":"<h4 align=\"center\"><strong><a href=\"http:\/\/javascript-tutor.net\/index.php\/lesson-19-radio-button-javascript\/\">&lt;Lesson 19&gt;<\/a> <a href=\"http:\/\/javascript-tutor.net\/index.php\/javascript-tutorial\/\">[Contents]<\/a> <a href=\"http:\/\/javascript-tutor.net\/index.php\/lesson-21-creating-selection-list\/\">&lt;Lesson 21&gt;<\/a><\/strong><\/h4>\n<p>In this lesson, we shall learn how to write code for the JavaScript checkbox. Checkboxes are differently from radio buttons. While radio buttons only allow the user to select one option at a time, checkboxes allow the users to select multiple options. You can try to click on the radio buttons and the checkboxes below:<\/p>\n<div style=\"overflow-x: auto;\">\n<table>\n<tbody>\n<tr>\n<td>\n<div class=\"codebg\">\n<form><input name=\"radio1\" type=\"radio\" \/><span style=\"color: #ff0000;\">Item1<\/span><\/p>\n<p><input name=\"radio1\" type=\"radio\" \/><span style=\"color: #ff6600;\">Item2<\/span><\/p>\n<p><input name=\"radio1\" type=\"radio\" \/><span style=\"color: #ffff00;\">Item3<\/span><\/p>\n<p><input name=\"radio1\" type=\"radio\" \/><span style=\"color: #00ff00;\">Item4<\/span><\/p>\n<p><input name=\"radio1\" type=\"radio\" \/><span style=\"color: #0000ff;\">Item5<\/span><\/p>\n<\/form>\n<\/div>\n<\/td>\n<td>\n<form><input name=\"Mycheckbox\" type=\"checkbox\" \/><span style=\"color: #ff0000;\">Item1<\/span><\/p>\n<p><input name=\"Mycheckbox\" type=\"checkbox\" \/><span style=\"color: #ff6600;\">Item2<\/span><\/p>\n<p><input name=\"Mycheckbox\" type=\"checkbox\" \/><span style=\"color: #ffff00;\">Item3<\/span><\/p>\n<p><input name=\"Mycheckbox\" type=\"checkbox\" \/><span style=\"color: #00ff00;\">Item4<\/span><\/p>\n<p><input name=\"Mycheckbox\" type=\"checkbox\" \/><span style=\"color: #0000ff;\">Item5<\/span><\/p>\n<\/form>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p><script async src=\"\/\/pagead2.googlesyndication.com\/pagead\/js\/adsbygoogle.js\"><\/script><br \/>\n<ins class=\"adsbygoogle\" style=\"display: block; text-align: center;\" data-ad-layout=\"in-article\" data-ad-format=\"fluid\" data-ad-client=\"ca-pub-3033628290023372\" data-ad-slot=\"5669011038\"><\/ins><br \/>\n<script>\n     (adsbygoogle = window.adsbygoogle || []).push({});\n<\/script><\/p>\n<p>The status of a checkbox is either check or unchecked. A checkbox can be created in a web page using the following format:<\/p>\n<p>&lt;input type=&#8221;checkbox&#8221; name=&#8221;Checkbox1&#8243; value=&#8221;chkbox1&#8243;&gt;Item1<\/p>\n<h3><strong>20.1 Using the checkboxes<\/strong><\/h3>\n<p>In this example, the user can verify whether a checkbox is checked or not.<\/p>\n<div class=\"codebg\">\n<h4><strong>Example 20.1: Code for Item Selection<\/strong><\/h4>\n<p>&lt;html&gt;<br \/>\n&lt;head&gt;<br \/>\n&lt;html&gt;<br \/>\n&lt;head&gt;<br \/>\n&lt;meta http-equiv=&#8221;Content-Type&#8221; content=&#8221;text\/html; charset=windows-1252&#8243;&gt;<br \/>\n&lt;title&gt;Item1&lt;\/title&gt;<br \/>\n&lt;\/head&gt;<br \/>\n&lt;body&gt;<br \/>\n&lt;script&gt;<br \/>\nfunction checkstatus()<br \/>\n{ if(MyForm.Checkbox1.checked)<br \/>\ndocument.write(MyForm.Checkbox1.value+&#8221; is selected&#8221;);<br \/>\nelse<br \/>\ndocument.write(MyForm.Checkbox1.value+&#8221; is not selected&#8221;);<\/p>\n<p>}<br \/>\n&lt;\/script&gt;<\/p>\n<p>&lt;form&gt;<br \/>\n&lt;input value=&#8221;Click&#8221; onclick=&#8221;checkstatus()&#8221;&gt;<br \/>\n&lt;input Value=&#8221;Item1&#8243;&gt;Item1<br \/>\n&lt;\/form&gt;<br \/>\n&lt;\/body&gt;<\/p>\n<p>&lt;\/html&gt;<\/p>\n<\/div>\n<p>Click\u00a0<a href=\"http:\/\/javascript-tutor.net\/java_tutor\/Javascrpt_Example20.1.htm\">Example 20.1<\/a> to try it out.<\/p>\n<p>You can modify the above program by\u00a0adding more than one checkboxes to the page. The code is able to show the user how many checkboxes are being selected.<\/p>\n<div class=\"codebg\">\n<h4><strong>Example\u00a020.2:\u00a0To Check Status of Multiple Checkboxes<\/strong><\/h4>\n<p>&lt;html&gt;<br \/>\n&lt;head&gt;<br \/>\n&lt;meta http-equiv=&#8221;Content-Type&#8221; content=&#8221;text\/html; charset=windows-1252&#8243;&gt;<br \/>\n&lt;title&gt;JavaScript example 20.2: Multiple Checkboxes&lt;\/title&gt;<br \/>\n&lt;\/head&gt;<br \/>\n&lt;body&gt;<br \/>\n&lt;script&gt;<br \/>\nfunction checkstatus()<br \/>\n{for(count=0;count&lt;4;count++)<br \/>\n{if (MyForm.MyCheckbox[count].checked)<br \/>\nalert(MyForm.MyCheckbox[count].value+&#8221; is selected&#8221;);<br \/>\n}<\/p>\n<p>}<\/p>\n<p>&lt;\/script&gt;<\/p>\n<p>&lt;form&gt;<br \/>\n&lt;input value=&#8221;Click&#8221; onclick=&#8221;checkstatus()&#8221;&gt;&lt;br&gt;<br \/>\n&lt;input Value=&#8221;Item1&#8243;&gt;Item1&lt;br&gt;<br \/>\n&lt;input Value=&#8221;Item2&#8243;&gt;Item2&lt;br&gt;<br \/>\n&lt;input Value=&#8221;Item3&#8243;&gt;Item3&lt;br&gt;<br \/>\n&lt;input Value=&#8221;Item4&#8243;&gt;Item4&lt;br&gt;<br \/>\n&lt;\/form&gt;<br \/>\n&lt;\/body&gt;<\/p>\n<p>&lt;\/html&gt;<\/p>\n<\/div>\n<p>Please click on\u00a0<a href=\"http:\/\/javascript-tutor.net\/java_tutor\/Javascrpt_Example20.2.htm\">Example\u00a020.2<\/a> to test the output.<br \/>\n<script async src=\"\/\/pagead2.googlesyndication.com\/pagead\/js\/adsbygoogle.js\"><\/script><br \/>\n<ins class=\"adsbygoogle\" style=\"display: block; text-align: center;\" data-ad-layout=\"in-article\" data-ad-format=\"fluid\" data-ad-client=\"ca-pub-3033628290023372\" data-ad-slot=\"5669011038\"><\/ins><br \/>\n<script>\n     (adsbygoogle = window.adsbygoogle || []).push({});\n<\/script><\/p>\n<h4 align=\"center\"><a href=\"http:\/\/javascript-tutor.net\/index.php\/lesson-19-radio-button-javascript\/\">&lt;Lesson 19&gt;<\/a> <a href=\"http:\/\/javascript-tutor.net\/index.php\/javascript-tutorial\/\">[Contents]<\/a> <a href=\"http:\/\/javascript-tutor.net\/index.php\/lesson-21-creating-selection-list\/\">&lt;Lesson 21&gt;<\/a><\/h4>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>&lt;Lesson 19&gt; [Contents] &lt;Lesson 21&gt; In this lesson, we shall learn how to write code for the JavaScript checkbox. Checkboxes are differently from radio buttons. While radio buttons only allow the user to select one option at a time, checkboxes allow the users to select multiple options. You can try to click on the radio &hellip; <a href=\"https:\/\/javascript-tutor.net\/index.php\/lesson-20-checkboxes-javascript\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;JavaScript Lesson 20: JavaScript Checkbox&#8221;<\/span><\/a><\/p>\n","protected":false},"author":35895,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-382","page","type-page","status-publish","hentry"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v25.1 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>JavaScript Lesson 20: JavaScript Checkbox - Learn JavaScript Online | Free Interactive JavaScript Tutorials<\/title>\n<meta name=\"description\" content=\"This javascript lesson illustrate the use of checkbox in javascript\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/javascript-tutor.net\/index.php\/lesson-20-checkboxes-javascript\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"JavaScript Lesson 20: JavaScript Checkbox - Learn JavaScript Online | Free Interactive JavaScript Tutorials\" \/>\n<meta property=\"og:description\" content=\"This javascript lesson illustrate the use of checkbox in javascript\" \/>\n<meta property=\"og:url\" content=\"https:\/\/javascript-tutor.net\/index.php\/lesson-20-checkboxes-javascript\/\" \/>\n<meta property=\"og:site_name\" content=\"Learn JavaScript Online | Free Interactive JavaScript Tutorials\" \/>\n<meta property=\"article:modified_time\" content=\"2017-11-16T23:06:26+00:00\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/javascript-tutor.net\/index.php\/lesson-20-checkboxes-javascript\/\",\"url\":\"https:\/\/javascript-tutor.net\/index.php\/lesson-20-checkboxes-javascript\/\",\"name\":\"JavaScript Lesson 20: JavaScript Checkbox - Learn JavaScript Online | Free Interactive JavaScript Tutorials\",\"isPartOf\":{\"@id\":\"https:\/\/javascript-tutor.net\/#website\"},\"datePublished\":\"2011-12-20T14:25:46+00:00\",\"dateModified\":\"2017-11-16T23:06:26+00:00\",\"description\":\"This javascript lesson illustrate the use of checkbox in javascript\",\"breadcrumb\":{\"@id\":\"https:\/\/javascript-tutor.net\/index.php\/lesson-20-checkboxes-javascript\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/javascript-tutor.net\/index.php\/lesson-20-checkboxes-javascript\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/javascript-tutor.net\/index.php\/lesson-20-checkboxes-javascript\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/javascript-tutor.net\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"JavaScript Lesson 20: JavaScript Checkbox\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/javascript-tutor.net\/#website\",\"url\":\"https:\/\/javascript-tutor.net\/\",\"name\":\"Learn JavaScript Online | Free Interactive JavaScript Tutorials\",\"description\":\"Master JavaScript with free, interactive tutorials for beginners and experienced coders. Practice live coding and visualize how JavaScript works step by step.\",\"inLanguage\":\"en-US\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"JavaScript Lesson 20: JavaScript Checkbox - Learn JavaScript Online | Free Interactive JavaScript Tutorials","description":"This javascript lesson illustrate the use of checkbox in javascript","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/javascript-tutor.net\/index.php\/lesson-20-checkboxes-javascript\/","og_locale":"en_US","og_type":"article","og_title":"JavaScript Lesson 20: JavaScript Checkbox - Learn JavaScript Online | Free Interactive JavaScript Tutorials","og_description":"This javascript lesson illustrate the use of checkbox in javascript","og_url":"https:\/\/javascript-tutor.net\/index.php\/lesson-20-checkboxes-javascript\/","og_site_name":"Learn JavaScript Online | Free Interactive JavaScript Tutorials","article_modified_time":"2017-11-16T23:06:26+00:00","twitter_misc":{"Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/javascript-tutor.net\/index.php\/lesson-20-checkboxes-javascript\/","url":"https:\/\/javascript-tutor.net\/index.php\/lesson-20-checkboxes-javascript\/","name":"JavaScript Lesson 20: JavaScript Checkbox - Learn JavaScript Online | Free Interactive JavaScript Tutorials","isPartOf":{"@id":"https:\/\/javascript-tutor.net\/#website"},"datePublished":"2011-12-20T14:25:46+00:00","dateModified":"2017-11-16T23:06:26+00:00","description":"This javascript lesson illustrate the use of checkbox in javascript","breadcrumb":{"@id":"https:\/\/javascript-tutor.net\/index.php\/lesson-20-checkboxes-javascript\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/javascript-tutor.net\/index.php\/lesson-20-checkboxes-javascript\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/javascript-tutor.net\/index.php\/lesson-20-checkboxes-javascript\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/javascript-tutor.net\/"},{"@type":"ListItem","position":2,"name":"JavaScript Lesson 20: JavaScript Checkbox"}]},{"@type":"WebSite","@id":"https:\/\/javascript-tutor.net\/#website","url":"https:\/\/javascript-tutor.net\/","name":"Learn JavaScript Online | Free Interactive JavaScript Tutorials","description":"Master JavaScript with free, interactive tutorials for beginners and experienced coders. Practice live coding and visualize how JavaScript works step by step.","inLanguage":"en-US"}]}},"_links":{"self":[{"href":"https:\/\/javascript-tutor.net\/index.php\/wp-json\/wp\/v2\/pages\/382","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/javascript-tutor.net\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/javascript-tutor.net\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/javascript-tutor.net\/index.php\/wp-json\/wp\/v2\/users\/35895"}],"replies":[{"embeddable":true,"href":"https:\/\/javascript-tutor.net\/index.php\/wp-json\/wp\/v2\/comments?post=382"}],"version-history":[{"count":40,"href":"https:\/\/javascript-tutor.net\/index.php\/wp-json\/wp\/v2\/pages\/382\/revisions"}],"predecessor-version":[{"id":2499,"href":"https:\/\/javascript-tutor.net\/index.php\/wp-json\/wp\/v2\/pages\/382\/revisions\/2499"}],"wp:attachment":[{"href":"https:\/\/javascript-tutor.net\/index.php\/wp-json\/wp\/v2\/media?parent=382"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}