用css按钮替换单选按钮并将标签保留在div中

Question

创建了一个小提琴http://jsfiddle.net/4QZED/2/。 （Explosion Pills 更新版本 - http://jsfiddle.net/ExplosionPIlls/4QZED/4/ ）而不是显示普通收音机，或者用图像替换收音机。我想用一个 div 替换它，我可以装扮成一个按钮，悬停类更改并单击类更改。而且点击隐藏的收音机也被选中。但还要求标签（标签参考显示的文本，例如如下所示 .co.uk .com .net 等）位于 div/按钮内。或者能够将文本添加到 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');
        }
    });
});

Answer 1

我已尝试改进您的解决方案，使其按您想要的方式工作。你有几个错误。最重要的是，input[name=domain_ext] 和input [name=domain_ext] 之间有一个非常重要的区别（空格是后代选择器）。您还在选中的事件中使用$(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/