通过选择单选按钮使文本更大胆

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/

Answer 2

您可以使用$(this)选择器

$(document).ready(function(e) { 
    $("input[type='radio']").click(function() {
        $("input[type='radio']").parent().css('font-weight','');
        $(this).parent().css('font-weight','bold');
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<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"><span>IT infrastructure alignment with business goals and growth<img /></label>
    </div>
    <div class="radio">
        <label><input type="radio" name="optradio"><span>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"><span>Flexibility of services to meet customer needs<img /></label>
    </div>
    <div class="radio">
        <label><input type="radio" name="optradio"><span>Political climate for business<img /></label>
    </div>
    <div class="form-group radio">
        <label><input type="radio" name="optradio"></label><span>
        <textarea class="form-control" rows="2" placeholder="Other(please specify)" id="comment"></textarea>
    </div>
</form>