JSFiddle - React, Tailwind, and code Playground
by doctor23
HTML
<div class="first">
<div class="choose-case">
<h4>
Выбeрите чехол
</h4>
<label class="case__label">
<input type="radio" id="setting-input" name="option[23]" value="63">
<label for="setting-input"></label>
<h5>
Стандартная
<br>
комплектация
</h5>
<img src="http://new.fm-apeks.ru/image/catalog/description/layers/case.jpg">
<p>
Пышный чехол, изготовленный из хлопкового жаккарда белого цвета, простеганный на объемном синтепоне 300 плотности и спанбонде, что повышает комфорт спального места.
</p>
</label>
<label class="case__label">
<input type="radio" id="setting-input2" name="option[23]" value="64">
<label for="setting-input2"></label>
<h5>
Стандартная
<br>
комплектация
</h5>
<img src="http://new.fm-apeks.ru/image/catalog/description/layers/case.jpg">
<p>
Пышный чехол, изготовленный из хлопкового жаккарда белого цвета, простеганный на объемном синтепоне 300 плотности и спанбонде, что повышает комфорт спального места.
</p>
</label>
</div>
</div>
<div class="second"><div class="choose-case">
<h4>
Выбeрите чехол
</h4>
<label class="case__label">
<input type="radio" id="setting-input" name="option[23]" value="63" checked>
<label for="setting-input"></label>
<h5>
Стандартная
<br>
комплектация
</h5>
<img src="http://new.fm-apeks.ru/image/catalog/description/layers/case.jpg">
<p>
Пышный чехол, изготовленный из хлопкового жаккарда белого цвета, простеганный на объемном синтепоне 300 плотности и спанбонде, что повышает комфорт спального места.
</p>
</label>
<label class="case__label">
<input type="radio" id="setting-input2" name="option[23]" value="64">
<label...
CSS
.choose-case {
margin-top: 40px;
color: #939393; }
.choose-case h4 {
font-size: 24px;
color: #928282; }
.choose-case .case__label {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
margin-bottom: 0; }
.choose-case .case__label h5 {
font-size: 20px;
margin-bottom: 0;
margin-left: -150px; }
.choose-case .case__label input {
display: none; }
.choose-case .case__label input + label {
background: url(http://new.fm-apeks.ru/image/catalog/description/radio.png) no-repeat scroll 0 0;
cursor: pointer;
padding-left: 13px;
margin-bottom: 0;
padding-top: 1%;
height: 13px;
width: 13px; }
.choose-case .case__label input:checked + label {
background: url(http://new.fm-apeks.ru/image/catalog/description/radio-active.png) no-repeat scroll 0 0; }
.choose-case .case__label img {
-o-object-fit: cover;
object-fit: cover;
width: 165px;
height: 120px; }
.choose-case .case__label p {
font-size: 16px;
width: 24%;
text-align: justify;
margin-bottom: 0; }
JavaScript
/* $("div.choose-case:nth-of-type(2)").remove(); */
/* $('.second .choose-case .case__label:nth-of-type(1) input').removeAttr('checked'); */
$('.first .choose-case .case__label:nth-of-type(1) input').each(function(){
this.checked = true;
});