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/

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

1 个答案: