라디오 버튼은 하나의 양식에서만 작동하며 다른 양식은 사용할 수 없습니다.

Question

입력 유형 라디오의 입력 스타일을 수정하려고하는데 두 가지 다른 형식의 라디오 입력이 있습니다. 라디오 입력은 첫 번째 양식에서만 작동하며 두 번째 양식에서는 작동하지 않습니다. 나는 아직도 두 번째 작업을하지 않는 이유에 대해 혼란 스럽다.

도와주세요. https://jsfiddle.net/devefrontend/vaqdsmjk/10/

<input type="radio" name="roundtrip" id="oneway" value="oneway" checked=""> 
<label for="oneway">Oneway</label> 

[type="radio"]:checked, 
 
[type="radio"]:not(:checked) { 
 
    position: absolute; 
 
    left: -9999px; 
 
} 
 

 
[type="radio"]:checked + label, 
 
[type="radio"]:not(:checked) + label { 
 
    position: relative; 
 
    padding-left: 28px; 
 
    cursor: pointer; 
 
    line-height: 20px; 
 
    display: inline-block; 
 
    color: #666; 
 
} 
 

 
[type="radio"]:checked + label:before, 
 
[type="radio"]:not(:checked) + label:before { 
 
    content: ''; 
 
    position: absolute; 
 
    left: 0; 
 
    top: 0; 
 
    width: 18px; 
 
    height: 18px; 
 
    border: 1px solid #ddd; 
 
    border-radius: 100%; 
 
    background: #fff; 
 
} 
 

 
[type="radio"]:checked + label:after, 
 
[type="radio"]:not(:checked) + label:after { 
 
    content: ''; 
 
    width: 12px; 
 
    height: 12px; 
 
    background: #F87DA9; 
 
    position: absolute; 
 
    top: 4px; 
 
    left: 4px; 
 
    border-radius: 100%; 
 
    -webkit-transition: all 0.2s ease; 
 
    transition: all 0.2s ease; 
 
} 
 

 
[type="radio"]:not(:checked) + label:after { 
 
    opacity: 0; 
 
    -webkit-transform: scale(0); 
 
    transform: scale(0); 
 
} 
 

 
[type="radio"]:checked + label:after { 
 
    opacity: 1; 
 
    -webkit-transform: scale(1); 
 
    transform: scale(1); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 

 
<div role="tabpanel" class="tab-pane active" id="flights"> 
 
    <form name="flight" method="GET" action="" id="searchFlights" class="form-inline"> 
 
    <ul class="radio-list"> 
 
     <li id="radioFlights"> 
 
     <input type="radio" name="roundtrip" id="oneway" value="oneway" checked=""> 
 
     <label for="oneway">Oneway</label> 
 
     </li> 
 
     <li id="radioFlights"> 
 
     <input type="radio" name="roundtrip" id="return" value="return"> 
 
     <label for="return">Return</label> 
 
     </li> 
 
    </ul> 
 
    </form> 
 
</div> 
 
<div role="tabpanel" class="tab-pane" id="trains"> 
 
    <form name="train" method="GET" action="" id="searchTrains" class="form-inline"> 
 
    <ul class="radio-list"> 
 
     <li id="radioTrains"> 
 
     <input type="radio" name="roundtrip" id="oneway" value="oneway" checked=""> 
 
     <label for="oneway">Oneway</label> 
 
     </li> 
 
     <li id="radioTrains"> 
 
     <input type="radio" name="roundtrip" id="return" value="return"> 
 
     <label for="return">Return</label> 
 
     </li> 
 
    </ul> 
 
    </form> 
 
</div>

Answer 1

Id은 고유해야합니다. 따라서 id을 라디오 입력란에 고유하게 입력하십시오.

[type="radio"]:checked, 
 
[type="radio"]:not(:checked) { 
 
    position: absolute; 
 
    left: -9999px; 
 
} 
 

 
[type="radio"]:checked + label, 
 
[type="radio"]:not(:checked) + label { 
 
    position: relative; 
 
    padding-left: 28px; 
 
    cursor: pointer; 
 
    line-height: 20px; 
 
    display: inline-block; 
 
    color: #666; 
 
} 
 

 
[type="radio"]:checked + label:before, 
 
[type="radio"]:not(:checked) + label:before { 
 
    content: ''; 
 
    position: absolute; 
 
    left: 0; 
 
    top: 0; 
 
    width: 18px; 
 
    height: 18px; 
 
    border: 1px solid #ddd; 
 
    border-radius: 100%; 
 
    background: #fff; 
 
} 
 

 
[type="radio"]:checked + label:after, 
 
[type="radio"]:not(:checked) + label:after { 
 
    content: ''; 
 
    width: 12px; 
 
    height: 12px; 
 
    background: #F87DA9; 
 
    position: absolute; 
 
    top: 3px; 
 
    left: 3px; 
 
    border-radius: 100%; 
 
    -webkit-transition: all 0.2s ease; 
 
    transition: all 0.2s ease; 
 
} 
 

 
[type="radio"]:not(:checked) + label:after { 
 
    opacity: 0; 
 
    -webkit-transform: scale(0); 
 
    transform: scale(0); 
 
} 
 

 
[type="radio"]:checked + label:after { 
 
    opacity: 1; 
 
    -webkit-transform: scale(1); 
 
    transform: scale(1); 
 
} 
 
ul{ 
 
    list-style:none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 

 
<div role="tabpanel" class="tab-pane active" id="flights"> 
 
    <form name="flight" method="GET" action="" id="searchFlights" class="form-inline"> 
 
    <ul class="radio-list"> 
 
     <li id="radioFlights"> 
 
     <input type="radio" name="roundtrip" id="oneway" value="oneway" checked=""> 
 
     <label for="oneway">Oneway</label> 
 
     </li> 
 
     <li id="radioFlights"> 
 
     <input type="radio" name="roundtrip" id="return" value="return"> 
 
     <label for="return">Return</label> 
 
     </li> 
 
    </ul> 
 
    </form> 
 
</div> 
 
<div role="tabpanel" class="tab-pane" id="trains"> 
 
    <form name="train" method="GET" action="" id="searchTrains" class="form-inline"> 
 
    <ul class="radio-list"> 
 
     <li id="radioTrains"> 
 
     <input type="radio" name="roundtrip" id="oneway2" value="oneway" checked=""> 
 
     <label for="oneway2">Oneway</label> 
 
     </li> 
 
     <li id="radioTrains"> 
 
     <input type="radio" name="roundtrip" id="return2" value="return"> 
 
     <label for="return2">Return</label> 
 
     </li> 
 
    </ul> 
 
    </form> 
 
</div>

Answer 2

I을 올바르게 이해한다면 당신은 "searchFlights을"다른 설정해야합니다, 당신은 처음 두 라디오를 원하는 형태 : 사전

전 감사 "searchTrain"형식으로 함께 작업 할 수 있습니다.

이 경우 각 양식의 라디오 입력에 대해 다른 이름이 필요합니다. 라디오는 입력의 "이름"부분을 일치시켜 작동합니다.

다른 이름을 사용하도록 각 세트를 변경해보십시오. 예를 들어, "searchFlights"양식에는 "roundtripFlight"를 사용하고 "searchTrains"양식에는 "roundtripTrain"을 사용하십시오.

<div role="tabpanel" class="tab-pane active" id="flights"> 
    <form name="flight" method="GET" action="" id="searchFlights" class="form-inline"> 
    <ul class="radio-list"> 
     <li id="radioFlights"> 
     <input type="radio" name="roundtripFlight" id="oneway" value="oneway" checked=""> 
     <label for="oneway">Oneway</label> 
     </li> 
     <li id="radioFlights"> 
     <input type="radio" name="roundtripFlight" id="return" value="return"> 
     <label for="return">Return</label> 
     </li> 
    </ul> 
    </form> 
</div> 
<div role="tabpanel" class="tab-pane" id="trains"> 
    <form name="train" method="GET" action="" id="searchTrains" class="form-inline"> 
    <ul class="radio-list"> 
     <li id="radioTrains"> 
     <input type="radio" name="roundtripTrain" id="oneway" value="oneway" checked=""> 
     <label for="oneway">Oneway</label> 
     </li> 
     <li id="radioTrains"> 
     <input type="radio" name="roundtripTrain" id="return" value="return"> 
     <label for="return">Return</label> 
     </li> 
    </ul> 
    </form> 
</div>