複数のスタイルのラジオボタンを追加します

Question

このラジオ入力は、jQueryで作成されたAJAXコールによってPHPから追加されます。ユーザーがボタンをクリックするたびに、1つのラジオがPHPコードから追加されます。スタイリングされていないときは、ラジオ入力は完全に機能します。このスタイルを使用しようとすると、切り替えが停止します。私は問題がdivだと思いますが、わかりません。

.h_tick { 
    margin-left: 1px; 
    margin-top: 0; 
    float: left; 
    height: 35px; 
    width: calc(14.28% - 1.85px); 
    width: -webkit-calc(14.28% - 1.85px); 
    width: -moz-calc(14.28% - 1.85px); 
    background-color: #eee; 
    border-radius: 0px; 
    text-align: center; 
    line-height: 35px; 
    font-size: 18px; 
    font-weight: bold; 
    color: #333; 
}  
.tc { 
    line-height: 35px; 
    text-align: center; 
    height: 35px; 
}  
label.tick { 
    color: ; 
    text-align: center; 
}  
input.tick { 
    display: none; 
    float: left; 
}  
input.tick[type=radio] + label.tick div.tc { 
    color: #fff; 
    background-color: ; 
    border-radius: 3px; 
}  
input.tick[type="radio"]:checked + label.tick div.tc:after { 
    content: '✔'; 
    color: #09ad7e; 
} 

<div class="h_tick"> 
    <input class="tick" type="radio" id="tk" value=""/> 
    <label class="tick" for="tk"> 
     <div class="tc" style=""></div> 
    </label> 
</div> 
<div class="h_tick"> 
    <input class="tick" type="radio" id="tk" value=""/> 
    <label class="tick" for="tk"> 
     <div class="tc" style=""></div> 
    </label> 
</div> 

Answer 1

あなたが見ている動作は仕様です。ラジオ入力は、同じ名前の別のラジオが選択された場合にのみ、選択解除することができます。ラジオをオン/オフにする場合は、代わりにチェックボックスを使用します。

複数の無線入力を使用していて、目的の1つだけを選択したい場合は、同じ名前をすべて与え、重複を避けるためにid属性を削除する必要があります。私は本当にあなたの問題だか理解していない

.h_tick { 
 
    margin-left: 1px; 
 
    margin-top: 0; 
 
    float: left; 
 
    height: 35px; 
 
    width: calc(14.28% - 1.85px); 
 
    width: -webkit-calc(14.28% - 1.85px); 
 
    width: -moz-calc(14.28% - 1.85px); 
 
    background-color: #eee; 
 
    border-radius: 0px; 
 
    text-align: center; 
 
    line-height: 35px; 
 
    font-size: 18px; 
 
    font-weight: bold; 
 
    color: #333; 
 
}  
 
.tc { 
 
    line-height: 35px; 
 
    text-align: center; 
 
    height: 35px; 
 
}  
 
label.tick { 
 
    text-align: center; 
 
}  
 
input.tick { 
 
    display: none; 
 
    float: left; 
 
}  
 
label.tick div.tc { 
 
    color: #fff; 
 
    border-radius: 3px; 
 
}  
 
input.tick[type="radio"]:checked + div.tc:after { 
 
    content: '✔'; 
 
    color: #09ad7e; 
 
}

<div class="h_tick"> 
 
    <label class="tick"> 
 
     <input class="tick" type="radio" value="" name="foo" /> 
 
     <div class="tc"></div> 
 
    </label> 
 
</div> 
 
<div class="h_tick"> 
 
    <label class="tick"> 
 
     <input class="tick" type="radio" value="" name="foo" /> 
 
     <div class="tc"></div> 
 
    </label> 
 
</div> 
 
<div class="h_tick"> 
 
    <label class="tick"> 
 
     <input class="tick" type="radio" value="" name="foo" /> 
 
     <div class="tc"></div> 
 
    </label> 
 
</div>

Answer 2

：

はここで働い例です

• あなたの現在の例では、一つだけのラジオボタンがあり、それだけで意味がありません：だけチェックされたラジオボタンがクリックされるとチェックされ、それからcのままになりますすぐに我々は第二1を入れて再び
• をクリックすると、hecked我々はそれを同じnameを与える重要な条件を想定し、すべては上記を示す、このスニペットの罰金

ルックに動作します。

.h_tick { 
 
    margin-left: 1px; 
 
    margin-top: 0; 
 
    float: left; 
 
    height: 35px; 
 
    width: calc(14.28% - 1.85px); 
 
    width: -webkit-calc(14.28% - 1.85px); 
 
    width: -moz-calc(14.28% - 1.85px); 
 
    background-color: #eee; 
 
    border-radius: 0px; 
 
    text-align: center; 
 
    line-height: 35px; 
 
    font-size: 18px; 
 
    font-weight: bold; 
 
    color: #333; 
 
} 
 
.tc { 
 
    line-height: 35px; 
 
    text-align: center; 
 
    height: 35px; 
 
} 
 
label.tick { 
 
    color:; 
 
    text-align: center; 
 
} 
 
input.tick { 
 
/* display: none;*/ 
 
    float: left; 
 

 
} 
 
input.tick[type=radio] + label.tick div.tc { 
 
    color: #fff; 
 
    background-color:; 
 
    border-radius: 3px; 
 
} 
 
input.tick[type="radio"]:checked + label.tick div.tc:after{ 
 
    content: '✔'; 
 
    color: #09ad7e; 
 
}

<div class="h_tick"> 
 
    <input class="tick" type="radio" id="tk1" name="tk" value=""/> 
 
    <label class="tick" for="tk"> 
 
    <div class="tc" style=""> 
 
    </div> 
 
    </label> 
 
</div> 
 
<div class="h_tick"> 
 
    <input class="tick" type="radio" id="tk2" name="tk" value=""/> 
 
    <label class="tick" for="tk"> 
 
    <div class="tc" style=""> 
 
    </div> 
 
    </label> 
 
</div>

だけではなく、反対に、彼らは異なる id秒を持っている必要があり、両方のラジオボタンのための共通 nameあり

注意

。