如何使用jQuery或javascript使选定的单选按钮标签的文本加粗？

Question

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

 <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; } }); 

Answer 1

您可以为此使用纯CSS，无需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> 

我添加了span元素以包裹文本的节点（应为粗体）。