在div中保持無線標籤，並在radiooverstate中保存無線電

Question

http://jsfiddle.net/4QZED/6/。嘗試爲選中的未選定廣播和懸停/鼠標懸停創建3個狀態。每個關閉狀態都是css/div/button。但試圖使標籤成爲按鈕，以將標籤文本保留在按鈕中。

更喜歡css而不是jpg，以避免頁面縮放時圖像質量下降。

$(function() { 
    $("input[name='domain_ext']").each(function() { 
     if ($(this).prop('checked')) { 
      $(this).hide(); 
      $(this).after("<div class='radioButtonOff'> label </div>"); 
     } else { 
      $(this).hide(); 
      $(this).after("<div class='radioButtonOff'> label </div>"); 
     } 
    }); 

    $("input[type=radio]").change(function() { 
     $(this).siblings('.radioButtonOff').add('.radioButtonOn').toggleClass('radioButtonOff radioButtonOn'); 
    }); 

     /* 
$(".radioButtonOff").mouseover(function() { 
     if ($(this)toggle('.radioButtonHover'); 
    }); 

    $("input[type=label]").change(function() { 
     if($(this).find('#radiolabel'); 
      $(this).hide(); 
      $(this).after("input[type=label]").add(span); 
     }); 
*/ 

}); 

Answer 1

更改jQuery以簡單地從標籤中拉出文本並將其添加到動態附加div。

編輯：我意識到你的檢查狀態的if/else語句毫無意義，因爲它根本不會改變任何事情。您可能有其他計劃，但根據發佈的示例，您可以完全避開jQuery的第一部分。我對下面的jquery代碼做了一個小的編輯。

$("input[name='domain_ext']").each(function() { 
    var lbl = $(this).parent("label").text(); 
    if ($(this).prop('checked')) { 
     $(this).hide(); 
     $(this).after("<div class='radioButtonOn'>" + lbl + "</div>"); 
     // something else here if radio is checked?? 
    } else { 
     $(this).hide(); 
     $(this).after("<div class='radioButtonOff'>" + lbl + "</div>"); 
    } 
}); 

在標籤HTML中添加了一個跨度以隱藏文本。

<label> 
    <input type="radio" name="domain_ext" value="all" /> 
    <span>All</span></label> 

更改CSS以允許懸停狀態工作並隱藏標籤文本。

.radioButtonOff { width: 60px; height: 20px; color: #fff; background: #333333;} 
.radioButtonOff:hover, .radiobuttonOn:hover { width: 60px; color: #fff;height: 20px; background: #00a;} 
.radioButtonOn { width: 60px; height: 20px; color: #fff;background: #a00;} 
label span { display: none;} 

Updated fiddle here

Answer 2

能得到這個CSS在Chrome工作。沒有在其他瀏覽器中測試，但應該是體面的。

label {position:relative; width:60px; height:20px; display:inline-block; line-height:20px; text-align:center;} 
.radioButtonOff,.radioButtonHover,.radioButtonOn { width:100%; height:100%; position:absolute; z-index:-1; } 
.radioButtonOff { background: #333333;} 
.radioButtonHover { background: #666666;} 
.radioButtonOn { background: #999999;} 

例如：http://jsfiddle.net/P9m7q/