单击单选按钮时，突出显示 jQuery 中的 <p> 标记答案

【问题标题】：On click of Radio button, highlight a <p> tag in jQuery单击单选按钮时，突出显示 jQuery 中的 <p> 标记
【发布时间】：2015-12-20 16:30:05
【问题描述】：

我有两个单选按钮，下面有自己的标签和段落。下面是它的外观：

HTML

<input type="radio" id="less_7" name="duration" />
<label for="less_7" id="label_7">Less 7</label>
<p>Less 7</p>

<input type="radio" id="7_10" name="duration" />
<label for="7_10" id="label_10">7 to 10</label>
<p>7 to 10</p>

CSS

label {
    font-weight: normal;
}
.strong {
    font-weight: bold;
}

jQuery

$(document).ready(function() {
    $('label').click(function() {
        $('label').removeClass('strong');
        $(this).addClass('strong');
    });
});

单击单选按钮时，我希望最接近它的段落标签以 strong 类突出显示。单击任何其他单选按钮时，其段落应突出显示，前一个应丢失其类别。

目前，我可以突出显示相应的标签。我想将类 strong 设置为它下面的段落。

我的工作小提琴 -> https://jsfiddle.net/ajitks/x83mpjzw/

如果可以使用下一个类，如何选择$(this + p)？

【问题讨论】：

你也可以使用:checked状态inputjsfiddle.net/x83mpjzw/4
@Vitorinofernandes - 一个非常优雅和简单的解决方案。不知道您可以使用 + 选择器在 CSS 中最直接的元素之后选择一个元素。谢谢。

标签： jquery html css radio-button

【解决方案1】：

你可以使用next:

$(document).ready(function() {
    $('label').click(function() {
        $('label').removeClass('strong');
        $('label').next('p').removeClass('strong');
        $(this).next('p').addClass('strong');
        $(this).addClass('strong');
    });
});

更新JSFiddle

【讨论】：

【解决方案2】：

试试这个

$(document).ready(function() {
$('label').click(function() {
    $('label').nextAll('p').removeClass('strong');
    $(this).next('p').addClass('strong');
});
});

fiddle

【讨论】：

【解决方案3】：

无论您点击什么 - 标签或单选按钮本身，这个都将起作用：

$(document).ready(function() {
    $("input[type='radio']").click(function() {
        $("input[type='radio']").next('label').removeClass('strong');
        $("input[type='radio']").next('label').next('p').removeClass('strong');
        $(this).next('label').addClass('strong');
        $(this).next('label').next('p').addClass('strong');
    });
});

label {
font-weight: normal;
}

.strong {
font-weight: bold;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="radio" id="less_7" name="duration" />
<label for="less_7" id="label_7">Less 7</label>
<p>Less 7</p>
<input type="radio" id="7_10" name="duration" />
<label for="7_10" id="label_10">7 to 10</label>
<p>7 to 10</p>

【讨论】：

【解决方案4】：

您还可以使用 jQuery 的 siblings 方法来缩短代码。

$(function(){
    $('input[type="radio"]').on('click',function() {
        if( $(this).is(':checked') == true ){
            $(this).next().next('p').addClass('strong').siblings().removeClass('strong');
        }
    });
});

label {
font-weight: normal;
}

.strong {
font-weight: bold;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<input type="radio" id="less_7" name="duration" />
<label for="less_7" id="label_7">Less 7</label>
<p>Less 7</p>
<input type="radio" id="7_10" name="duration" />
<label for="7_10" id="label_10">7 to 10</label>
<p>7 to 10</p>

【讨论】：