CODEWITHSUNDEEP
jquery
fawad
fawad

Reputation: 1353

set label attribute using jquery

I have 4 labels as below:

<label id = "t1">Tag 1 </label>
<label id = "t2">Tag 2 </label>
<label id = "t3">Tag 3 </label>
<label id = "t4">Tag 4 </label>

I want to set one Tag as bold at one time. Lets say if i want to set "Tag 1" as bold then remaining should be normal font and if I set "Tag 2" as bold then remaining should be set to normal font.

What should be the code for jquery ?

Upvotes: 2

Views: 4637

Answers (5)

Ram
Ram

Reputation: 144689

You can create a class:

W3C: The separation of HTML from CSS makes it easier to maintain sites, share style sheets across pages, and tailor pages to different environments. This is referred to as the separation of structure (or: content) from presentation.

.bold {
   font-weight: bold;
}


$('label').click(function() {
   $('label').removeClass('bold')
   $(this).addClass('bold')
})

Upvotes: 4

Pranay Rana
Pranay Rana

Reputation: 176896

just do like this

for bold

$('#t1').css({ 'font-weight': 'bold' });

to remove bold

$('#t1').css({ 'font-weight': ''});

for each you need to do like this

function applyboldtolable(id)
{
$('label').each(function()
{
  $(this).css({ 'font-weight': ''});
});
   $('#'+id).css({ 'font-weight': 'bold' });

}

Note you can replace .each with 

$('label').css({ 'font-weight': ''});

Upvotes: 0

Shahid Ahmed
Shahid Ahmed

Reputation: 494

if you want to change the font weight on label click use below code

<label class="tlabel" id = "t1">Tag 1 </label>
<label class="tlabel" id = "t2">Tag 2 </label>
<label class="tlabel" id = "t3">Tag 3 </label>
<label class="tlabel" id = "t4">Tag 4 </label>

.bold {
   font-weight: bold;
}

$('.tlabel').click(function() {
   $('.tlabel').removeClass('bold')
   $(this).addClass('bold')
});

Upvotes: 0

sabithpocker
sabithpocker

Reputation: 15566

A variation of @Raminson's

you can use a class:

.bold {
   font-weight: bold;
}

$('label').click(function() {
   $(this).addClass('bold').siblings('label').removeClass('bold');
})

Upvotes: 2

Sangeet Menon
Sangeet Menon

Reputation: 9905

function setBoldLabel(labelID){
    $('label').each( function () {
                 if($(this).id()==labelID)
                 $(this).css({ 'font-weight': 'bold' });
                 else
                 $(this).css({ 'font-weight': 'normal' }); 
    } );
}

Upvotes: 0

Related Questions