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

他们创造了一把小提琴。（更新版本-）而不是显示普通收音机，或用图像替换收音机。我想用一个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');
        }
    });
});

$（函数（）{
$（“输入[name='domain\u ext']）。每个（函数（）{
if（$（this.prop（'checked'））{
$（this.hide（）；
美元（$（“标签”））之后；
}否则{
$（this.hide（）；
美元（$（“标签”））之后；
}
});
$（“input.radio”）。单击（函数（）{
if（$（this.attr（'src'）=='radiobuttonOn'）{
$（this.attr（'src'，'radiobuttonOff'）；
$（this.prev（）.attr（'checked'，'false'）；
}否则{
$（this.attr（'src'，'radioButtonOn'）；
$（this.prev（）.attr（'checked'，'true'）；
}
});
});

我已尝试改进您的解决方案，使其按您想要的方式工作。你犯了几个错误。最重要的是，

input[name=domain\u ext]

和

input[name=domain\u 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');
});

$（“输入[name='domain\u ext']）。每个（函数（）{
if（$（this.prop（'checked'））{
$（this.hide（）；
$（本）。之后（“标签”）；
}否则{
$（this.hide（）；
$（本）。之后（“标签”）；
}
});
$（“输入[type=radio]”）。更改（函数（）{
$（this）.sides（'.radioButtonOff'）。add（'.radioButtonOn'）。toggleClass（'radioButtonOff radiobuttonnon'）；
});

---

我已尝试改进您的解决方案，使其按您想要的方式工作。你犯了几个错误。最重要的是，

input[name=domain\u ext]

和

input[name=domain\u 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');
});

$（“输入[name='domain\u ext']）。每个（函数（）{
if（$（this.prop（'checked'））{
$（this.hide（）；
$（本）。之后（“标签”）；
}否则{
$（this.hide（）；
$（本）。之后（“标签”）；
}
});
$（“输入[type=radio]”）。更改（函数（）{
$（this）.sides（'.radioButtonOff'）。add（'.radioButtonOn'）。toggleClass（'radioButtonOff radiobuttonnon'）；
});

---

您的两个选择器都错了。如果要选择无线电输入，请不要在输入和[name=domain\u ext]之间留空格，并使用输入[type=radio]。两个选择器都错了。如果要选择无线电输入，请不要在输入和[name=domain\u ext]之间留空格，并使用输入[type=radio]。谢谢，大有改进。。您认为最好的方法是使用span和class将单选标签（例如co.uk）放入div按钮吗？恐怕我不明白您的意思css按钮包含单词标签的地方。我需要单选按钮标签来替换文本“标签”，它目前在div/css按钮中。谢谢，大的改进。。您认为最好的方法是使用span和class将单选标签（例如co.uk）放入div按钮吗？恐怕我不明白您的意思css按钮包含单词标签的地方。我需要单选按钮标签来替换当前位于div/css按钮中的文本“label”