[ Solved – 5 Answers ] CSS – How to select a radio button by default?

PROBLEM :
we 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?

[pastacode lang=”markup” manual=”%3Cinput%20type%3D%22radio%22%20name%3D%22sel%22%20value%3D%22%22%20%2F%3E%20%0A” message=”HTML Code” highlight=”” provider=”manual”/]

SOLUTION 1 :

XHTML solution:

[pastacode lang=”markup” manual=”%3Cinput%20type%3D%22radio%22%20name%3D%22sel%22%20value%3D%22%22%20checked%3D%22checked%22%20%2F%3E%20%0A” message=”HTML Code” highlight=”” provider=”manual”/] [ad type=”banner”] Please note, that the actual value of checked attribute does not actually matter; it’s just a convention to assign “checked”. Most importantly, strings like “true” or “false” don’t have any special meaning.

If we don’t aim for XHTML conformance, we can simplify the code to:

[pastacode lang=”markup” manual=”%3Cinput%20type%3D%22radio%22%20name%3D%22imgsel%22%20value%3D%22%22%20checked%3E%20%0A” message=”HTML Code” highlight=”” provider=”manual”/]

SOLUTION 2 :

This doesn’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’t work.
our html will look pretty similar to the normal radio button:

[pastacode lang=”markup” manual=”%3Cinput%20type%3D’radio’%20name%3D’group’%20ng-model%3D’mValue’%20value%3D’first’%20%2F%3EFirst%20%0A%3Cinput%20type%3D’radio’%20name%3D’group’%20ng-model%3D’mValue’%20value%3D’second’%20%2F%3E%20Second%20%0A” message=”HTML Code” highlight=”” provider=”manual”/] [ad type=”banner”] SOLUTION 3 :

In our controller we declared the mValue that is associated with the radio buttons. To have one of these radio buttons preselected, assign the $scope variable associated with the group to the desired

input’s value:
$scope.mValue=”second”

This makes the “second” radio button selected on loading the page