如何使用jQuery或javascript使所选单选按钮标签的文本变为粗体？

Question

我想使用jQuery或javascript使所选单选按钮标签的文本变为粗体。我不知道如何触发我写的功能。

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

＆＃13;

＆＃13;

$("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;
	}
});

＆＃13;

＆＃13;

＆＃13;

Answer 1

你可以使用纯css，不需要javascript：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

  

我添加了一个span元素来包装文本的节点（应该是粗体）。