I want to make the text of selected radio button label bold using jQuery or javascript. I don't know how to triggerthe function I wrote.

<div class="row field">
  <div class="radios">
    <label class="radio-inline"><input type="radio" name="gender" value="Male" id="male" checked>Male</label>

    <label class="radio-inline"><input type="radio" name="gender" value="Female" id="female">Female</label>

  </div>

I want to make the text of selected radio button label bold using jQuery or javascript. I don't know how to triggerthe function I wrote.

<div class="row field">
  <div class="radios">
    <label class="radio-inline"><input type="radio" name="gender" value="Male" id="male" checked>Male</label>

    <label class="radio-inline"><input type="radio" name="gender" value="Female" id="female">Female</label>

  </div>

$("input[name=gender]:radio").change(function () {
	var gender = $('input[name="gender"]:checked').val();

	switch(gender){
		case "Male":
		$(":radio[value=Male]").css("font-weight", "bold");
		break;
    
		case "Female":
		$(":radio[value=Female]").css("font-weight", "bold");
		break;
	}
});

• javascript
• jquery
• html
• css

1 Answer 1

You can use pure css for that, no need for javascript:

input:checked ~ span {
  font-weight: bold;
}

<div class="row field">
  <div class="radios">
    <label class="radio-inline"><input type="radio" name="gender" value="Male" id="male" checked><span>Male</span></label>
    <label class="radio-inline"><input type="radio" name="gender" value="Female" id="female"><span>Female</span></label>
  </div>
</div>

Node that I added a span element to wrap the text (which should be bold).