带有关联标签控件的样式单选按钮

Question

我正在尝试通过使用我将设置样式的关联标签控件来制作自定义单选按钮。我遇到的问题是在 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 我正在寻找下一个不正确的标签元素，因为它不在输入元素之后，而是在之后跨度。

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

这就是我想要实现的。

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;
}

带有关联标签控件的样式单选按钮

Style radiobutton with an associated label control

css

asp.net

radio-button