具有关联标签控件的样式单选按钮答案

【问题标题】：Style radiobutton with an associated label control具有关联标签控件的样式单选按钮
【发布时间】：2016-02-14 09:36:17
【问题描述】：

我正在尝试通过使用我将设置样式的关联标签控件来制作自定义单选按钮。我遇到的问题是在 CSS 中，我试图在 input[type=radio] 之后向标签添加样式，因为 input[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
}

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

我希望我已经清楚我遇到的问题，并且非常感谢任何帮助。

这就是我想要达到的目标。

【问题讨论】：

您不需要在兄弟选择器中输入，标签是 radBtnShoppingBag 的兄弟，如下所示：.radBtnShoppingBag + label {…}

标签： css asp.net radio-button

【解决方案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;
}

【讨论】：