Question

我有一个男女价值的广播组

如何通过jquery获取当前选定的值，然后将一个类应用于代表这样的值的无线电输入，以便突出显示？

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

我无法控制表单以使它们成为实际按钮，所以我只是简单地重新设置了我给出的无线电输入的外观。

请求代码;

[System.Net.WebRequest]::DefaultWebProxy = [System.Net.WebRequest]::GetSystemWebProxy()
[System.Net.WebRequest]::DefaultWebProxy.Credentials = [System.Net.CredentialCache]::DefaultNetworkCredentials

由于

Answer 1

你在这里：

{{1}}

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

您可以使用＆＃34;：已选中＆＃34; CSS伪类而不是用JavaScript添加类，如下所示：

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

JQuery突出显示所选的单选按钮

4 个答案: