ラジオボタンは1つのフォームでのみ動作し、他のフォームは使用できません

Question

入力タイプのラジオの入力スタイルを変更しようとしています。ラジオ入力は2つの異なる形式になっています。ラジオ入力は最初のフォームでのみ機能し、2番目のフォームでは機能しません。私はまだ2番目の問題に取り組まない理由で混乱しています。

私を助けてください。事前のおかげで

例：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

私はこれを正しく理解していれば、あなたはあなたの最初の2つの無線をしたいと思いますが、「searchFlights」フォームを異なる設定する必要があります一緒に働くために "searchTrain"フォームで一緒に働くために、そして他の2つは働きます。

この場合、各フォームの無線入力には異なる名前が必要です。ラジオは、入力の「名前」部分を照合することによって機能します。

異なる名前を使用するように各セットを変更できます。たとえば、「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>