Question

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

＆＃13;

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

＆＃13;

我的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）选择器

＆＃13;

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

＆＃13;

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

＆＃13;

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

2 个答案: