1

画面上の表示として画像を使用しているラジオボタンがいくつかあります。通常の状態、ホバー状態、クリック状態。画像はすべての状態で表示されていますが、2 つのラジオ ボタンをクリックすると、両方ともクリックされたままになります。またはクリックしたときにどうすればよいですか。

ここにjqueryがあります：

$(".image_radiobtn input[type='radio']").change(function(){
    if($(this).is(":checked")){
       $(this).next("label").removeClass('hover').addClass('checked');          
    }
    else{
       $(this).next("label").removeClass('checked');
    }
});

html は次のとおりです。 

         <ul id="radiobtn-toggle-view" class="image_radiobtn">
          <li>
           <input id="input-1" type="radio" name="address" value="1" /> 
           <label for="input-1">Use this address.</label>
          </li>
         </ul>

CSSは次のとおりです。

#radiobtn-toggle-view, #radiobtn-toggle-view2 {
list-style: none;
margin: 0;
position: relative;
cursor: pointer;
}

#radiobtn-toggle-view li, #radiobtn-toggle-view2 li{
min-height: 15px;
height: 15px;
margin:0;
padding: 10px 0;  
}

#radiobtn-toggle-view label, #radiobtn-toggle-view2 label {
cursor: pointer;
font-size: 14px;
font-weight: bold;
height: 15px;
line-height: 15px;
margin: 0;
text-decoration: none;
}
.image_radiobtn li input[type='radio']{
display:none;
}

.image_radiobtn li label {
background: url(/images/icons/grey_radio_btn.png) no-repeat;
padding-left: 20px;
}

.image_radiobtn li label:hover { 
background: url(/images/icons/e_radio_btn.png) no-repeat;
}

.image_radiobtn li label.checked {
background: url(/images/icons/g_radio_btn.png) no-repeat;
}


.hidden {display: none;}
4

1 に答える 1

0

Jquery コードに新しいクラスを追加する前に、チェック済みのクラスをすべてクリアする必要があります。PS: グループのすべての無線を取得するように、階層に従ってセレクターを変更します。

$(".image_radiobtn input[type='radio']").change(function(){
    $('selector').removeClass('checked');
    if($(this).is(":checked")){
       $(this).next("label").removeClass('hover').addClass('checked');          
    }
    else{
       $(this).next("label").removeClass('checked');
    }
});
于 2013-08-16T20:29:46.430 に答える