使用css按鈕替換單選按鈕並保留div中的標籤

已創建小提琴http://jsfiddle.net/4QZED/2/。（爆炸藥更新版 - http://jsfiddle.net/ExplosionPIlls/4QZED/4/）而不是顯示正常的收音機，或用圖像替換收音機。我想用一個div替換它，我可以打扮成一個按鈕，並將鼠標懸停在課程變更上，並點擊課程變更。而且還點擊隱藏的廣播被選中。而且還要求標籤（標籤參考文本顯示如下.co.uk .com .net等）位於div /按鈕內。或者能夠向div按鈕添加文本。這可能嗎？使用css按鈕替換單選按鈕並保留div中的標籤

$(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.radio").click(function() { 
     if($(this).attr('src') == 'radiobuttonOn') { 
      $(this).attr('src', 'radiobuttonOff'); 
      $(this).prev().attr('checked', 'false'); 
     } else { 
      $(this).attr('src', 'radioButtonOn'); 
      $(this).prev().attr('checked', 'true'); 
     } 
    }); 
});

來源

2013-03-12 alwayslearning

你選擇的這兩種都是錯誤的。 – undefined 2013-03-12 02:17:26

如果您要選擇無線電輸入，請勿在輸入和[name = domain_ext]之間留出空格，並使用輸入[type = radio]。 – kinakuta 2013-03-12 02:18:19

我試圖改進您的解決方案，讓它以您想要的方式工作。你有幾個錯誤。最重要的是，input[name=domain_ext]和input [name=domain_ext]（空間是後代選擇器）之間有一個非常重要的區別。您在checked事件中也使用$(this)顯然更改div，但事件綁定到輸入。 input.radio和input[type=radio]之間也有差異。

$("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'); 
});

http://jsfiddle.net/ExplosionPIlls/4QZED/4/

來源

2013-03-12 02:20:20

謝謝大改進..你認爲最好的方法是使用span和class將無線標籤，例如.co.uk放到div按鈕中嗎？ – alwayslearning 2013-03-12 02:28:25

恐怕我不明白你的意思 – 2013-03-12 02:32:47

其中CSS按鈕包含單詞標籤。我需要單選按鈕標籤來替換文本「label」，它現在位於div/css按鈕中 – alwayslearning 2013-03-12 02:34:54

使用css按鈕替換單選按鈕並保留div中的標籤

回答

相關問題