jQuery突出显示选中的单选按钮

Question

我有一个男女广播电台

如何通过jquery获取当前选定的值，然后将一个类应用于表示val的单选输入，使其突出显示？

对于那些查询：我正在使单选输入显示为按钮并隐藏单选图标，因此我想对其应用一个类，以便在当前选定的按钮上显示选定的状态。

我无法控制表格使其变为实际的按钮，因此我只是在重新调整给出的无线电输入的外观。

对于那些请求的代码；

<form action="">
  <input type="radio" name="gender" value="male"> <span style="btn btn-default">Male</span><br>
  <input type="radio" name="gender" value="female"> <span style="btn btn-default">Female</span><br>
  <input type="radio" name="gender" value="other"> <span style="btn btn-default">Other</span>
</form>

谢谢

Answer 1

这个给你：

var selectedInput = $('input[name="gender"]:checked');
var value = selectedInput.val();
selectedInput.addClass('highlighted');

Answer 2

您可以使用.on('change')来跟踪单选按钮选中的事件，并可以使用addClass()方法在选择时添加类，如下所示：

 $(function() { $("input[type='radio']").on('change', function(e) { $("input[type='radio']").removeClass('myClass'); $("input[type='radio']").next('span').removeClass('highlight'); if($(this).is(':checked')) { $(this).addClass('myClass'); $(this).next('span').addClass('highlight'); } }) }) 

 .highlight { background-color: yellow; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form action=""> <input type="radio" name="gender" value="male"> <span style="btn btn-default">Male</span><br> <input type="radio" name="gender" value="female"> <span style="btn btn-default">Female</span><br> <input type="radio" name="gender" value="other"> <span style="btn btn-default">Other</span> </form> 

Answer 3

您可以使用CSS设置样式。

您的html：

<input type="radio" name="gender" value="male"> <span style="btn btn-default">Male</span><br>

CSS：

input[type=radio]:checked + span {
  color: red;
} 

Answer 4

您可以使用“：checked” CSS伪类，而不是使用JavaScript添加类，如下所示：

input[type=radio][name=gender]:checked {
  // Your styles
}