0

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

1 回答 1

5

我已尝试改进您的解决方案，以使其按您想要的方式工作。你有几个错误。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/

于 2013-03-12T02:20:20.160 回答