Radio button checked option
<p>I am working on the radio buttons, I have designed something from google help but in this <a href="https://jsfiddle.net/8ax050s8/" rel="nofollow">fiddle</a> you will see that both are checked when the page load, i used the checked option only with radio1 button. i need to change it that the page loads radio1button is checked and radio2 button is not checked. </p>

<p>When you will click on 2nd button you will see that button 1 will be unchecked, but button 2 remains checked, any solution ?</p>

<pre><code>&lt;input type="radio" name="radio" id="radio1" class="radio" checked/&gt;
&lt;label for="radio1"&gt;Now&lt;/label&gt;



&lt;input type="radio" name="radio" id="radio2" class="radio"/&gt;
&lt;label for="radio2"&gt;Later&lt;/label&gt;

&lt;style&gt;
label {
  width: 150px;
  border-radius: 3px;
  border: 1px solid #D1D3D4
}

/* hide input */
input.radio:empty {
margin-left: -999px;
}

/* style label */
input.radio:empty ~ label {
position: relative;
float: left;
line-height: 2.5em;
text-indent: 3.25em;
margin-top: 2em;
margin-left: 2em;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}

input.radio:empty ~ label:before {
position: absolute;
display: block;
top: 0;
bottom: 0;
left: 0;
content: '';
width: 2.5em;
background: #D1D3D4;
border-radius: 3px 0 0 3px;
}

/* toggle hover */
input.radio:hover:not(:checked) ~ label:before {
content:'\2714';
text-indent: .9em;
color: #C2C2C2;
}

input.radio:hover:not(:checked) ~ label {
color: #888;
}

/* toggle on */
input.radio:checked ~ label:before {
content:'\2714';
text-indent: .9em;
color: #9CE2AE;
background-color: #4DCB6D;
}

input.radio:checked ~ label {
color: #777;
}

/* radio focus */
input.radio:focus ~ label:before {
box-shadow: 0 0 0 3px #999;
}

&lt;/style&gt;
</code></pre>