onchange不使用单选按钮 [英] onchange not working with radio button

问题描述

我有几个单选按钮应该叫hider（东西）;当它们改变时，意味着当它们被检查或未被选中时。这工作，即，当检查他们调用JS函数，但是，如果他们未选中，从该组中选择另一个单选按钮，它不再调用js脚本。

I have a few radio buttons which should call hider(something); when they change, meaning when they are checked or unchecked. This works, i.e. when checked they call the JS function, however, if they're unchecked due to selecting another radio button from that group, it does not call the js script again.

我需要使用别的东西，而不是onchange？

Do I need to use something else than onchange?

这是单选按钮的样子：

<input name="ostype" type="radio" value="0" onchange="hider(solaris);">solaris
<input name="ostype" type="radio" value="1" onchange="hider(linux);">linux

我的hider函数目前是：

My hider function is currently:

function hider(divid) {
 if ($(divid).is('.hidden')) {
  $(divid).removeClass('hidden');
 } else {
  $(divid).addClass('hidden');
 }
}

推荐答案

这个问题仍然没有正确回答，但在Google的radio button onchange排名很高，这里是一个适合任何人仍然寻找的解决方案。

Since this question is still not answered correctly yet ranks quite high for me in Google for "radio button onchange", here's a proper solution for anyone still looking.

如果你使用jQuery，只需使用属性选择器） //stackoverflow.com/questions/4795392/onchange-not-working-with-radio-button#comment5313114_4795422\"> Flavius Stef 。

If you're using jQuery, just use jQuery's attribute selector as noted by Flavius Stef.

OP，不完全清楚你的代码是什么。让我们假设在你的代码中你想添加隐藏类到任何单选按钮是活动的。

OP, it's not entirely clear what your code does. Let's assume in your code you want to add the "hidden" class to whatever radio button is active.

$("your selector here").change(function() {
    $('input[name="' + this.name + '"]').removeClass("hidden");

    $(this).addClass("hidden");
});

请注意 $（this）（jQuery对象）和 this （DOM对象）。基本上，我从每个相同名字的输入中删除隐藏类，然后将隐藏类添加到当前输入。

Please note the difference between $(this) (the jQuery object) and this (the DOM object). Basically I'm removing the "hidden" class from every input that goes by the same name, and then I add the "hidden" class to the current input.

当然我假设在这里，你不使用重复的名称不同的输入在页面上。另请注意，这只适用于单选按钮，因为单选按钮更改事件只在激活时才会触发，而不是在停用时触发。

Of course I'm assuming here that you're not using duplicate names for different inputs on the page. Also note that this would only work for radio buttons, as the radio button "change" event only fires when activated, not when deactivated.

在我的例子中，我想为活动单选按钮和复选框添加一个checked类。由于复选框在选中和取消选中时都会触发onchange事件，因此我需要一些额外的代码。

In my case, I wanted to add a "checked" class to active radio buttons and checkboxes. Since the checkbox fires the "onchange" event both when checked and unchecked, I needed a bit of extra code.

$('input[type="radio"]').change(function() {
    $('input[name="' + this.name + '"]').removeClass("checked");
    $(this).addClass("checked");
});

$('input[type="checkbox"]').change(function() {
    $(this).toggleClass("checked", ($(this).is(":checked")));
});

后一个函数使用 .is（：checked）是 true ，则rel =nofollow> toggleClass 设置 / code>。

The latter function uses toggleClass to set the "checked" class if .is(":checked") is true.

或者，您可能需要将这两个函数合并为：

Alternatively you might want to combine the two functions into something like:

$('input[type="radio"], input[type="checkbox"]').change(function() {
    if(this.type == "radio")
        $('input[name="' + this.name + '"]').removeClass("checked");

    $(this).toggleClass("checked", ($(this).is(":checked")));
});

无论哪种方式，在收听onclick事件时一定要小心，因为当输入为通过键盘导航激活。

Either way, always be careful when listening for an onclick event as it will not fire when the input is activated through keyboard navigation.

这篇关于onchange不使用单选按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！