获取jQuery中单选按钮组的ID
[英]get the id of radio button group in Jquery
问题描述
I have a group of radio buttons with the name 'periodType'. 
我有一组名为'periodType'的单选按钮。 There is one radio button in that group which behaves the same way as the others, except for the fact that it displays an additional div. 该组中有一个单选按钮，其行为与其他单选按钮相同，不同之处在于它显示了一个额外的div。 How can I get to know when that particular radio button is checked, as the change function below is quite generic for all the radio buttons in the group: 我如何知道何时选中了该特定的单选按钮，因为下面的更改功能对于该组中的所有单选按钮都是非常通用的：
$('input[name="periodType"]').change(function() {
if(this.checked) {
//do something (for all radio buttons)
//If unique radio button also do this
}
});
<input type="radio" name="periodType" default>
<input type="radio" name="periodType" default>
<input type="radio" name="periodType" default>
<input type="radio" name="periodType" default>
3 个解决方案
解决方案1
1 2012-06-26 12:20:16
You may want to add a value to your radio inputs: 您可能想在单选输入中添加一个值：
<input type="radio" name="periodType" value="one" default>
<input type="radio" name="periodType" value="two" default>
<input type="radio" name="periodType" value="three" default>
<input type="radio" name="periodType" value="four" default>
and then query that value: 然后查询该值：
$('input[name="periodType"]').change(function() {
if (this.value == 'three' && this.checked) {
//do something (for all radio buttons)
//If unique radio button also do this
}
});
解决方案2
0 2012-06-26 12:20:47
$('input[name="periodType"]').change(function() {
if(this.checked) {
//do something (for all radio buttons)
//If unique radio button also do this
var idval = $(this).attr("id");
if (idval == "something")
{
//do something
}
}
});
解决方案3
0 2012-06-26 15:05:36
May be you are looking for something like this. 可能您正在寻找这样的东西。 I have added each radio to its own div just to show the behaviour on change. 我已将每个广播添加到其自己的div中，只是为了显示更改时的行为。 Please let me know if you have any questions. 请让我知道，如果你有任何问题。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<style type="text/css">
.selected{background-color: #fad42e;}
.notSelected{background-color: #6f6e73;}
</style>
<script type="text/javascript">
$(document).ready(function () {
$('input[name="periodType"]').change(function() {
$(this).parent('div').removeClass();
$(this).parent('div').addClass('selected');
$('input[name="periodType"]')
.parent('div')
.not($(this).parent("div"))
.each(function(e){
$(this).removeClass();
$(this).addClass("notSelected");
});
});
});
</script>
</head>
<body>
<div>
<input type="radio" name="periodType" >
</div>
<div>
<input type="radio" name="periodType" >
</div>
<div>
<input type="radio" name="periodType" >
</div>
<div>
<input type="radio" name="periodType" >
</div>
</body>
</html>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.