Опция с радиокнопкой отмечена

Question

Я работаю над переключателями, я разработал что-то из справки Google, но в этом fiddle вы увидите, что оба проверяются при загрузке страницы, я использовал отмеченную опцию только с помощью кнопки radio1. мне нужно изменить его, чтобы страница загружала радиоканал, и флажок radio2 не установлен.

Когда вы нажмете на вторую кнопку, вы увидите, что кнопка 1 будет снята, но кнопка 2 остается отмеченной, любое решение?

<input type="radio" name="radio" id="radio1" class="radio" checked/> 
<label for="radio1">Now</label> 



<input type="radio" name="radio" id="radio2" class="radio"/> 
<label for="radio2">Later</label> 

<style> 
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; 
} 

</style> 

Answer 1

вместо общего родственного ~ использование соседнего собрата + селекторного

Общих родственными подберут все метки рядом с элементом

Смежными родственным будет выбрать только следующий ярлык

https://jsfiddle.net/victor_007/8ax050s8/1/

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; 
 
}

<input type="radio" name="radio" id="radio1" class="radio" checked/> 
 
<label for="radio1">Now</label> 
 

 
<input type="radio" name="radio" id="radio2" class="radio" /> 
 
<label for="radio2">Later</label>