{"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<div class=\"code-embed-wrapper\"> <div class=\"code-embed-infos\"> <span class=\"code-embed-name\">HTML Code<\/span> <\/div> <pre class=\"language-markup code-embed-pre line-numbers\"  data-start=\"1\" data-line-offset=\"0\"><code class=\"language-markup code-embed-code\">&lt;input type=&quot;radio&quot; name=&quot;sel&quot; value=&quot;&quot; \/&gt; <\/code><\/pre> <\/div>\n<p><label class=\"label label-info\">SOLUTION 1 :<\/label><\/p>\n<p><strong>XHTML solution:<\/strong><\/p>\n<div class=\"code-embed-wrapper\"> <div class=\"code-embed-infos\"> <span class=\"code-embed-name\">HTML Code<\/span> <\/div> <pre class=\"language-markup code-embed-pre line-numbers\"  data-start=\"1\" data-line-offset=\"0\"><code class=\"language-markup code-embed-code\">&lt;input type=&quot;radio&quot; name=&quot;sel&quot; value=&quot;&quot; checked=&quot;checked&quot; \/&gt; <\/code><\/pre> <\/div>\n[ad type=&#8221;banner&#8221;]\nPlease note, that the actual value of checked attribute does not actually matter; it&#8217;s just a convention to assign &#8220;checked&#8221;. Most importantly, strings like &#8220;true&#8221; or &#8220;false&#8221; don&#8217;t have any special meaning.<\/p>\n<p>If we don&#8217;t aim for XHTML conformance, we can simplify the code to:<\/p>\n<div class=\"code-embed-wrapper\"> <div class=\"code-embed-infos\"> <span class=\"code-embed-name\">HTML Code<\/span> <\/div> <pre class=\"language-markup code-embed-pre line-numbers\"  data-start=\"1\" data-line-offset=\"0\"><code class=\"language-markup code-embed-code\">&lt;input type=&quot;radio&quot; name=&quot;imgsel&quot; value=&quot;&quot; checked&gt; <\/code><\/pre> <\/div>\n<p><label class=\"label label-info\">SOLUTION\u00a02 :<\/label><\/p>\n<p>This doesn&#8217;t exactly answer the question but for anyone using AngularJS trying to achieve this, the answer is slightly different. And actually the normal answer won&#8217;t work.<br \/>\nour html will look pretty similar to the normal radio button:<\/p>\n<div class=\"code-embed-wrapper\"> <div class=\"code-embed-infos\"> <span class=\"code-embed-name\">HTML Code<\/span> <\/div> <pre class=\"language-markup code-embed-pre line-numbers\"  data-start=\"1\" data-line-offset=\"0\"><code class=\"language-markup code-embed-code\">&lt;input type=&#039;radio&#039; name=&#039;group&#039; ng-model=&#039;mValue&#039; value=&#039;first&#039; \/&gt;First <br\/>&lt;input type=&#039;radio&#039; name=&#039;group&#039; ng-model=&#039;mValue&#039; value=&#039;second&#039; \/&gt; Second <\/code><\/pre> <\/div>\n[ad type=&#8221;banner&#8221;]\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&#8217;s value:<br \/>\n<strong>$scope.mValue=&#8221;second&#8221;<\/strong><\/p>\n<p>This makes the &#8220;second&#8221; 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}]}}