Want text to become bold after a checkmark is placed in the box next to it

fuzzybabybunny · Sep 8, 2013

I have a list of things in a web form. Each item on the list has a checkbox next to it. Some of the checkboxes have checkmarks already in them, and others are empty.

I want the text next to the checkbox to turn bold whenever there is a check in the box.

So the text that already has a checkmark in the box next to them by default should appear bold on load.

Item text that has an empty checkbox next to them should turn bold the moment I place a checkmark in it.

How do I do this?

Code:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js">

<script>
$('#check1').click(function(){
    $('#lab1').toggleClass('check-bold')
})
$('#check2').click(function(){
    $('#lab2').toggleClass('check-bold')
})
$('#check3').click(function(){
    $('#lab3').toggleClass('check-bold')
})
</script>

<input id="check1" type="checkbox" name="hdrphotos" value="Unlimited HDR Photography" checked/>
<label id="lab1">Unlimited HDR Photos<br>
</label>

<input id="check2" type="checkbox" name="panoramas" value="Panoramas" checked/>
<label id="lab2">Panoramas<br>
</label>

<input id="check3" type="checkbox" name="video" value="Video" checked/>
<label id="lab3">Video<br>
</label>

In the CSS, I have:

Code:

.check-bold{
    font-weight: bold;
}

Leros · Sep 9, 2013

The following code adds a listener to all elements with the class "boldcheck". Each of these elements should have a "data-lid" attribute, which is the id of the label that needs to be made bold.

On page load, it iterates through each element with the class "boldcheck" and makes it bold if the element is checked. When the element is checked/unchecked, the onChange handler will make it bold/unbold as appropriate.

My example below has 3 checkboxes. Checkbox 2 is checked on page load.

Code:

<html>
<head>
    <style type="text/css">
        .bold {font-weight:bold}    
    </style>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            // initialize checkboxes on page-load
            $(".boldcheck").each(function() {
                boldcheck(this);       
            });
            // add onChange listeners
            $(".boldcheck").change(function() {
                boldcheck(this);          
            });
        });

        function boldcheck(e) {
            var label = $("#" + $(e).attr('data-lid'));
            if (e.checked) 
                label.addClass('bold');
            else
                label.removeClass('bold');  
        }
    </script>
</head>
<body>
    <input id="check1" type="checkbox" class="boldcheck" data-lid="label1"/>
    <label id="label1">Check 1</label>
    <br>
    <input id="check2" type="checkbox" class="boldcheck" data-lid="label2" checked="true"/>
    <label id="label2">Check 2</label>
    <br>
    <input id="check2" type="checkbox" class="boldcheck" data-lid="label3"/>
    <label id="label3">Check 3</label>
</body>
</html>

Ken g6 · Sep 9, 2013

For modern browsers, you don't need JavaScript to do that.

fuzzybabybunny · Sep 9, 2013

I posted this question on SO and got exactly what I wanted:

You'll want to make sure your checkbox comes immediately before the text, and that the text is wrapped in label tags:

<input type="checkbox" id="will" checked /><label for="will">William</label>
<input type="checkbox" id="sue" /><label for="sue">Susan</label>

Then use CSS specific to the checked inputs to make the label after them appear in bold:

input:checked+label{font-weight:bold;}

Leros · Sep 9, 2013

Ken g6 said:
For modern browsers, you don't need JavaScript to do that.

Sigh. Sadly, I have to support old-ish browsers in my daily work so I don't get to use nifty things like that.

Ken g6 · Sep 10, 2013

Leros said:
Sigh. Sadly, I have to support old-ish browsers in my daily work so I don't get to use nifty things like that.

Me too.

But I also support newer browsers, so I'd do CSS with fallback jQuery for IE7 and IE8.

An example I did is the text that pops up when hovering over the images here.

Search

Want text to become bold after a checkmark is placed in the box next to it

fuzzybabybunny

Moderator<br>Digital & Video Cameras

Leros

Lifer

Ken g6

Programming Moderator, Elite Member

fuzzybabybunny

Moderator<br>Digital & Video Cameras

Leros

Lifer

Ken g6

Programming Moderator, Elite Member

TRENDING THREADS