样式radiobutton与相关的标签控制

Question

我正在尝试通过使用相关的标签控件制作自定义单选按钮，我将设置样式。我遇到的问题是在CSS中，我在输入[type = radio]之后尝试在标签中添加样式，因为输入[type = radio]是在span元素内生成的，我不会这样做知道如何设置标签的样式，这是input [type = radio]父元素（即span元素）的下一个元素。

我应该怎么做？

<asp:RadioButton ID="radbtnContinue" CssClass="radBtnShoppingBag" runat="server" GroupName="radButton" Checked="True"/>
<asp:Label runat="server" AssociatedControlID="radbtnContinue" CssClass="labelRadioGroup"></asp:Label>

<asp:RadioButton ID="radbtnCollect" CssClass="radBtnShoppingBag" runat="server" GroupName="radButton" Checked="False" />
<asp:Label runat="server" AssociatedControlID="radbtnCollect" CssClass="labelRadioGroup"></asp:Label>

生成的代码

<div id="radbtnContainer" style="float: left">     
    <span class="radBtnShoppingBag">
        <input id="ctl00_ctl00__nestedContent__mainpageContent_BasketViewProducts_radbtnContinue" type="radio" name="ctl00$ctl00$_nestedContent$_mainpageContent$BasketViewProducts$radButton" value="radbtnContinue" checked="checked">
    </span>
    <label for="ctl00_ctl00__nestedContent__mainpageContent_BasketViewProducts_radbtnContinue" class="labelRadioGroup"></label>

    <span class="radBtnShoppingBag">
        <input id="ctl00_ctl00__nestedContent__mainpageContent_BasketViewProducts_radbtnCollect" type="radio" name="ctl00$ctl00$_nestedContent$_mainpageContent$BasketViewProducts$radButton" value="radbtnCollect">
    </span>
    <label for="ctl00_ctl00__nestedContent__mainpageContent_BasketViewProducts_radbtnCollect" class="labelRadioGroup"></label>
</div>

CSS

.radBtnShoppingBag input[type=radio]{display:none;}

#radbtnContainer label{
display: block;
float: left;
color: #000;
cursor: pointer;
}

.radBtnShoppingBag input[type=radio] + label{
    //styles
}

.radBtnShoppingBag input[type=radio]:checked + label::before
{
    //more styles
}

查看生成的代码，您会看到span中的输入元素和css中我正在寻找下一个不正确的标签元素，因为它不在输入元素之后，而是在跨度之后。

我希望我已经清楚我所拥有的问题并且非常感谢任何帮助。

这就是我想要实现的目标。

Answer 1

单独使用CSS时，无法在检查收音机时更新标签。您将不得不使用JavaScript / jQuery解决方案。

I've created an example here where I toggle a class to the corresponding checked label

这非常特定于您的HTML结构

//jQuery
$('input[type=radio]:checked')
.parent('span.radBtnShoppingBag')
.next('label.labelRadioGroup')
.addClass('is-checked');

$('input[type=radio]').change(function () {
    $('label.labelRadioGroup').removeClass('is-checked');
    $('input[type=radio]:checked')
        .parent('span.radBtnShoppingBag')
        .next('label.labelRadioGroup')
        .addClass('is-checked');
});

//CSS
#radbtnContainer .radBtnShoppingBag + label {
    color:red;
}
#radbtnContainer label.is-checked {
    color:blue;
}