{"id":169,"date":"2017-03-13T12:45:04","date_gmt":"2017-03-13T12:45:04","guid":{"rendered":"https:\/\/www.wikitechy.com\/technology\/?p=169"},"modified":"2017-10-15T13:57:29","modified_gmt":"2017-10-15T08:27:29","slug":"select-radio-button-default","status":"publish","type":"post","link":"https:\/\/www.wikitechy.com\/technology\/select-radio-button-default\/","title":{"rendered":"[ Solved \u2013 5 Answers ] CSS &#8211; How to select a radio button by default?"},"content":{"rendered":"<p><label class=\"label label-warning\">PROBLEM :<\/label><br \/>\nwe have some radio buttons and when we tried to be set as selected by default when the page is loaded. How can we do that?<\/p>\n[pastacode lang=\u201dmarkup\u201d manual=\u201d%3Cinput%20type%3D%22radio%22%20name%3D%22sel%22%20value%3D%22%22%20%2F%3E%20%0A\u201d message=\u201dHTML Code\u201d highlight=\u201d\u201d provider=\u201dmanual\u201d\/]\n<p><label class=\"label label-info\">SOLUTION 1 :<\/label><\/p>\n<p><strong>XHTML solution:<\/strong><\/p>\n[pastacode lang=\u201dmarkup\u201d manual=\u201d%3Cinput%20type%3D%22radio%22%20name%3D%22sel%22%20value%3D%22%22%20checked%3D%22checked%22%20%2F%3E%20%0A\u201d message=\u201dHTML Code\u201d highlight=\u201d\u201d provider=\u201dmanual\u201d\/]\n[ad type=\u201dbanner\u201d]\nPlease note, that the actual value of checked attribute does not actually matter; it\u2019s just a convention to assign \u201cchecked\u201d. Most importantly, strings like \u201ctrue\u201d or \u201cfalse\u201d don\u2019t have any special meaning.<\/p>\n<p>If we don\u2019t aim for XHTML conformance, we can simplify the code to:<\/p>\n[pastacode lang=\u201dmarkup\u201d manual=\u201d%3Cinput%20type%3D%22radio%22%20name%3D%22imgsel%22%20value%3D%22%22%20checked%3E%20%0A\u201d message=\u201dHTML Code\u201d highlight=\u201d\u201d provider=\u201dmanual\u201d\/]\n<p><label class=\"label label-info\">SOLUTION\u00a02 :<\/label><\/p>\n<p>This doesn\u2019t exactly answer the question but for anyone using AngularJS trying to achieve this, the answer is slightly different. And actually the normal answer won\u2019t work.<br \/>\nour html will look pretty similar to the normal radio button:<\/p>\n[pastacode lang=\u201dmarkup\u201d manual=\u201d%3Cinput%20type%3D\u2019radio\u2019%20name%3D\u2019group\u2019%20ng-model%3D\u2019mValue\u2019%20value%3D\u2019first\u2019%20%2F%3EFirst%20%0A%3Cinput%20type%3D\u2019radio\u2019%20name%3D\u2019group\u2019%20ng-model%3D\u2019mValue\u2019%20value%3D\u2019second\u2019%20%2F%3E%20Second%20%0A\u201d message=\u201dHTML Code\u201d highlight=\u201d\u201d provider=\u201dmanual\u201d\/]\n[ad type=\u201dbanner\u201d]\n<label class=\"label label-info\">SOLUTION\u00a03 :<\/label><\/p>\n<p>In our controller we declared the\u00a0mValue\u00a0that is associated with the radio buttons. To have one of these radio buttons preselected, assign the\u00a0<strong>$scope<\/strong>\u00a0variable associated with the group to the desired<\/p>\n<p>input\u2019s value:<br \/>\n<strong>$scope.mValue=\u201dsecond\u201d<\/strong><\/p>\n<p>This makes the \u201csecond\u201d radio button selected on loading the page<\/p>\n","protected":false},"excerpt":{"rendered":"<p>[Solved \u2013 5 Answers] HTML &#8211; CSS &#8211; select a radio button by default &#8211; we have some radio buttons and when we tried to be set as selected by default<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[26,24,83466],"tags":[274,273,272,271,270,269,268,267,266,265,264,263,262,261,260,259,258,257,256,255,254,253,252,251,250,249,248,247,246,245,244,243,242,241,240,239,238,237,236,235,234,233,232,231,230,229,228,227,226,225,224,223,222,221,220,219,218,217,216,215,214,213,212,211,210,209,208,207],"class_list":["post-169","post","type-post","status-publish","format-standard","hentry","category-css","category-html","category-radio-button","tag-add-radio-button","tag-bootstrap-radio-button","tag-bootstrap-radio-group","tag-button-radio","tag-checkbox-and-radio-button","tag-checkbox-as-radio-button","tag-checkbox-radio","tag-checkbox-radio-button","tag-checked-radio","tag-checked-radio-button","tag-code-for-radio-button","tag-create-radio-button","tag-css-for-radio-button","tag-css-input-radio","tag-css-input-type-radio","tag-css-radio-button","tag-css-radio-button-checked","tag-css-radio-button-group","tag-css-radio-button-style","tag-css-radio-button-style-examples","tag-css-style-radio-button","tag-css-type-radio","tag-custom-radio-button-css","tag-input-radio","tag-input-radio-box","tag-input-radio-button","tag-input-radio-checked","tag-input-radio-css","tag-input-type-radio-checked","tag-input-type-radio-css","tag-option-radio","tag-radio-box","tag-radio-box-checked","tag-radio-box-css","tag-radio-box-group","tag-radio-box-selected","tag-radio-button","tag-radio-button-and-checkbox","tag-radio-button-bootstrap","tag-radio-button-checkbox","tag-radio-button-checked","tag-radio-button-code","tag-radio-button-css","tag-radio-button-css-code","tag-radio-button-css-design","tag-radio-button-css-example","tag-radio-button-css-style","tag-radio-button-css-style-examples","tag-radio-button-options","tag-radio-button-properties","tag-radio-button-selected","tag-radio-button-selected-by-default","tag-radio-button-style","tag-radio-button-style-css","tag-radio-button-submit","tag-radio-button-tag","tag-radio-button-value","tag-radio-check-code","tag-radio-checkbox","tag-radio-checked","tag-radio-checked-css","tag-radio-checked-html","tag-radio-selected-value","tag-radio-style-css","tag-select-radio-button-by-default-in-css","tag-selected-radio-button","tag-style-radio-buttons","tag-submit-radio-button"],"_links":{"self":[{"href":"https:\/\/www.wikitechy.com\/technology\/wp-json\/wp\/v2\/posts\/169","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.wikitechy.com\/technology\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.wikitechy.com\/technology\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.wikitechy.com\/technology\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.wikitechy.com\/technology\/wp-json\/wp\/v2\/comments?post=169"}],"version-history":[{"count":0,"href":"https:\/\/www.wikitechy.com\/technology\/wp-json\/wp\/v2\/posts\/169\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.wikitechy.com\/technology\/wp-json\/wp\/v2\/media?parent=169"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.wikitechy.com\/technology\/wp-json\/wp\/v2\/categories?post=169"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.wikitechy.com\/technology\/wp-json\/wp\/v2\/tags?post=169"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}