javascript - 通过选择单选按钮使文本更粗

Question

我是 jquery 的新手，我应该做这个简单的任务。如果我点击单选按钮意味着文本和单选按钮必须加粗。请帮我解决这个问题。我的 HTML 标记在这里

<form role="form">
    <p><b>What concerns you most as you manage your business?</b>(Select all that apply.)</p>
    <div class="radio active">
        <label>
            <input type="radio" name="optradio">IT infrastructure alignment with business goals and growth<img /></label>
    </div>
    <div class="radio">
        <label>
            <input type="radio" name="optradio">Controlling capital and expense<img /></label>
    </div>
    <div class="radio">
        <label>
            <input type="radio" name="optradio">Managing financial risk<img /></label>
    </div>
    <div class="radio">
        <label>
            <input type="radio" name="optradio">Data security and privacy<img /></label>
    </div>
    <div class="radio">
        <label>
            <input type="radio" name="optradio">Flexibility of services to meet customer needs<img /></label>
    </div>
    <div class="radio">
        <label>
            <input type="radio" name="optradio">Political climate for business<img /></label>
    </div>
    <div class="form-group radio">
        <label>
            <input type="radio" name="optradio">
        </label>
        <textarea class="form-control" rows="2" placeholder="Other(please specify)" id="comment"></textarea>
    </div>
</form>

我的 jquery 代码在这里

$(document).ready(function(e) {
    $(".radio label input").click(function() {
        $('.radio').each(function(event) {
            if ($(this).hasClass('active')) {
                $(this).css("font-family", "helveticabold");
                $('.radio').removeClass('active');

                if ($(this).next().hasClass('radio'))
                    $(this).next().addClass('active');
                else
                    $('.radio:last-child').addClass('active');
                return false;
            }
        });
    });

});

我知道它需要对代码做一些小改动，请大家帮帮我

Answer 1

您不需要使用each，因为只能选择一个radio。

这样做会:

Javascript:

$('.radio').on('click', function() {
    $('.bold').removeClass('bold');
    $(this).addClass('bold');
});

CSS:

.bold {
    font-weight: 800;
}

演示:https://jsfiddle.net/tusharj/3zzaLre0/