jQuery radio onchange 父元素的切换类？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/964961/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery radio onchange toggle class of parent element?
提问by TigerTiger
Please have a look on the following:
请查看以下内容：
$('#myRadio').change(function() {
if($(this).is(':checked')) {
$(this).parent().addClass('green');
} else {
$(this).parent().removeClass('green');
}
});
Markup lookslike somewhat as following
标记看起来有点像以下
<table>
<tr>
<td>Some text 1 </td>
<td><input type="radio" value="txt1" name="myRadio" id="text1" /></td>
<td>Some text 2 </td>
<td><input type="radio" value="txt2" name="myRadio" id="text2" /></td>
<td>Some text 3 </td>
<td><input type="radio" value="txt3" name="myRadio" id="text2" /></td>
</tr>
</table>
When I switch radio, above javascript code applies 'green' to TD tag, which is fine. But if I change the selection to another it adds the green to another but doesnt remove the green from the previously selected radio.
当我切换收音机时，上面的 javascript 代码将“绿色”应用于 TD 标签，这很好。但是，如果我将选择更改为另一个，它会将绿色添加到另一个，但不会从先前选择的收音机中删除绿色。
How do I make it work so that selecting a radio option changes its parent TD's class to green and selecting another will reset all but add green to only the newly selected!
我如何使它工作，以便选择一个无线电选项将其父 TD 的类更改为绿色，而选择另一个将重置所有但仅向新选择的添加绿色！
Can it also be made to change class of its first previous TD which contains "some text 3" etc??
是否也可以更改包含“某些文本 3”等的第一个先前 TD 的类？
Thanks.
谢谢。
回答by Chris Van Opstal
Try something like this:
尝试这样的事情：
if($(this).is(':checked')) {
$(this).parent().parent().parent().find('.green').removeClass('green');
$(this).parent().addClass('green');
}
This will find the table element of your current radio button grouping, find any elements with the green class, and remove the class.
这将找到您当前单选按钮分组的表格元素，找到任何具有绿色类的元素，并删除该类。
Alternatively, if you only have one radio button group on the page, it would be simpler to just do:
或者，如果页面上只有一个单选按钮组，这样做会更简单：
$('.green').removeClass('green');
回答by Philippe Leybaert
You shouldn't use the change() event on radio buttons and checkboxes. It behaves a little dodgy and inconsistent across browsers (it causes problems in all versions of IE)
您不应在单选按钮和复选框上使用 change() 事件。它在浏览器之间表现得有点狡猾和不一致（它会导致所有版本的 IE 出现问题）
Use the click() event instead (don't worry about accessibility, because the click event will also be fired if you activate/select a radio button with the keyboard)
改用 click() 事件（不要担心可访问性，因为如果您使用键盘激活/选择单选按钮，也会触发 click 事件）
And as the others here pointed out, resetting the green is easy as well:
正如这里的其他人指出的那样，重置绿色也很容易：
So simply change your code to
所以只需将您的代码更改为
$('#myRadio').click(function() {
$(this).parents("tr").find(".green").removeClass("green");
if($(this).is(':checked')) {
$(this).parent().addClass('green');
}
});
EDIT: as requested in comment, also change the previous td:
编辑：根据评论中的要求，还要更改之前的 td：
$('#myRadio').click(function() {
$(this).parents("tr").find(".green").removeClass("green");
if($(this).is(':checked')) {
$(this).parent().prev().andSelf().addClass('green');
}
});
or even better, turning all td elements of the parent row green:
或者甚至更好，将父行的所有 td 元素变为绿色：
$('#myRadio').click(function() {
$(this).parents("tr").find(".green").removeClass("green");
if($(this).is(':checked')) {
$(this).parents("tr").find("td").addClass('green');
}
});
回答by mungojerie
I just wrote a solution that does not care how deeply nested the radio buttons are, it just uses the name attribute of the radio buttons. This means this code would work without modification anywhere, I think - I had to write it since I have a strange situation where one radio button is nested differently than its cohorts with the same name.
我刚刚写了一个解决方案，它不关心单选按钮的嵌套深度，它只使用单选按钮的 name 属性。这意味着这段代码无需修改就可以在任何地方工作，我认为 - 我必须编写它，因为我有一个奇怪的情况，即一个单选按钮的嵌套与其同名的队列不同。
$('input[type="radio"]').change( function() {
// grab all the radio buttons with the same name as the one just changed
var this_radio_set = $('input[name="'+$(this).attr("name")+'"]');
// iterate through each
// if checked, set its parent label's class to "selected"
// if not checked, remove the "selected" class from the parent label
// my HTML markup for each button is <label><input type="radio" /> Label Text</label>
// so that this works anywhere even without a unique ID applied to the button and label
for (var i=0; i < this_radio_set.length;i++) {
if ( $(this_radio_set[i]).is(':checked') ) $(this_radio_set[i]).parents('label').addClass('selected');
else $(this_radio_set[i]).parents('label').removeClass('selected');
}
});
回答by eu-ge-ne
Try this:
尝试这个：
if($(this).is(':checked')) {
$(this).parent().siblings('td.green').removeClass('green');
$(this).parent().addClass('green');
}
回答by Majid Shahmohammadi
my proposal is :
我的建议是：
$('#myRadio').change(function() {
_parent = $(this).parent();
if($(this).is(':checked')) {
_parent.addClass('green');
} else {
_parent.removeClass('green');
}
});
回答by eapo
i think this is the best and more flexible way to do this:
我认为这是最好的和更灵活的方式来做到这一点：
forget the tables (google know many reason for that) and use wrappers like below
忘记表格（谷歌知道很多原因）并使用如下包装
<div id="radio_wrapper">
<span class="radio">
<label for="myRadio1" class="myRadio">Some text 1 </label>
<input type="radio" value="txt1" name="myRadio" id="myRadio1" class="myRadio" />
</span>
<span class="radio">
<label for="myRadio2" class="myRadio">Some text 2 </label>
<input type="radio" value="txt2" name="myRadio" id="myRadio2" class="myRadio" />
</span>
<span class="radio">
<label for="myRadio3" class="myRadio">Some text 3 </label>
<input type="radio" value="txt3" name="myRadio" id="myRadio3" class="myRadio" />
</span>
</div
format with CSS like this
像这样的 CSS 格式
span.radio {
background-color: #cccccc;
}
span.currentGreen {
background-color: #ccffcc;
}
and using this script you can do exactly the same as you want
并使用此脚本您可以完全按照您的意愿做
$('.myRadio').change(function() {
$('.currentGreen').removeClass('currentGreen'); // remove from all
if ($(this).is(':checked')) {
$(this).parent().addClass('currentGreen'); // add to current
}
});
i don't like to use filter() and find() because they use unnecessary resources in this case.
我不喜欢使用 filter() 和 find() 因为在这种情况下它们使用了不必要的资源。
回答by romaninsh
Here is the solution which worked great for me:
这是对我有用的解决方案：
var $boxes=$('input:radio');
var $parents = $boxes.parent();
$boxes.click(function(){
$parents.filter('.selected').removeClass('selected');
$(this).parent().addClass('selected');
});
$boxes.filter(':checked').parent().addClass('selected');
Features:
特征：
- Faster. Only selects list of checkboxes once.
- Does not rely on :checked. I'm not sure if there is a certain order in which "clicked" and "changed" will be executed across browsers.
- uses :radio instead of [type="radio"] which is jQuery recommended
- sets class on the parent for the default value of radio button.
- 快点。只选择一次复选框列表。
- 不依赖 :checked。我不确定在浏览器中执行“点击”和“更改”是否有特定的顺序。
- 使用 :radio 而不是 [type="radio"] 这是 jQuery 推荐的
- 为单选按钮的默认值设置父级的类。
Hope this helps!
希望这可以帮助！
