Javascript onchange 不使用单选按钮
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4795392/
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
onchange not working with radio button
提问by Florian
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.
我有几个单选按钮应该调用 hider(something); 当它们发生变化时，意味着它们被选中或未选中。这是有效的，即在选中时它们调用 JS 函数，但是，如果由于从该组中选择另一个单选按钮而未选中它们，则不会再次调用 js 脚本。
Do I need to use something else than onchange?
除了onchange，我还需要使用其他东西吗？
This is what the radio buttons look like at the moment:
这是目前单选按钮的样子：
<input name="ostype" type="radio" value="0" onchange="hider(solaris);">solaris
<input name="ostype" type="radio" value="1" onchange="hider(linux);">linux
My hider function is currently:
我的隐藏功能目前是：
function hider(divid) {
if ($(divid).is('.hidden')) {
$(divid).removeClass('hidden');
} else {
$(divid).addClass('hidden');
}
}
采纳答案by Robbert
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.
由于这个问题仍然没有得到正确回答，但在谷歌的“单选按钮onchange”中对我来说排名很高，因此对于仍在寻找的人来说，这是一个合适的解决方案。
If you're using jQuery, just use jQuery's attribute selectoras noted by Flavius Stef.
如果你正在使用jQuery，只是使用jQuery的属性选择器如由著名弗拉菲乌斯燕姿。
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.
OP，您的代码的作用并不完全清楚。让我们假设在您的代码中您想将“隐藏”类添加到任何处于活动状态的单选按钮。
$("your selector here").change(function() {
$('input[name="' + this.name + '"]').removeClass("hidden");
$(this).addClass("hidden");
});
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.
请注意$(this)（jQuery 对象）和this（DOM 对象）之间的区别。基本上，我从每个同名的输入中删除“隐藏”类，然后将“隐藏”类添加到当前输入中。
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.
当然，我在这里假设您没有对页面上的不同输入使用重复的名称。另请注意，这仅适用于单选按钮，因为单选按钮“更改”事件仅在激活时触发，而不是在停用时触发。
Listening for onchange on both checkboxes and radio buttons
在复选框和单选按钮上监听 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.
就我而言，我想向活动的单选按钮和复选框添加一个“已检查”类。由于复选框在选中和未选中时都会触发“onchange”事件，因此我需要一些额外的代码。
$('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")));
});
The latter function uses toggleClassto set the "checked" class if .is(":checked")is true.
后一个函数使用toggleClass来设置“已检查”类，如果.is(":checked")是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")));
});
Either way, always be careful when listening for an onclick event as it will not fire when the input is activated through keyboard navigation.
无论哪种方式，在侦听 onclick 事件时都要小心，因为当通过键盘导航激活输入时它不会触发。
回答by RoToRa
Use onclick.
使用onclick.
Also as the argument of your function call you'll need to either use a string with the id as a jQuery selector ('#solaris') - better yet use this:
同样作为函数调用的参数，您需要使用带有 id 的字符串作为 jQuery 选择器 ( '#solaris') - 最好使用this：
<input name="ostype" type="radio" value="0" onclick="hider(this);">solaris
回答by Andrew Hymanman
<input name="ostype" type="radio" value="0" onclick="hider('solaris');">solaris
<input name="ostype" type="radio" value="1" onclick="hider('linux');">linuxfunction hider(divid) {
$( 'div.div_class' ).hide();
$( '#' + divid ).show();
}Make sure you add a class to call the divs and make sure you put quotes around solaris and linux in the function calls
确保您添加了一个类来调用 div，并确保在函数调用中为 solaris 和 linux 加上引号
回答by Flavius Stef
Here's a version that you might draw inspiration from (tested on Chrome and FF):
这是一个您可能会从中汲取灵感的版本（在 Chrome 和 FF 上测试）：
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js">
</script>
</head>
<body>
<input type="radio" name="ostype" checked="checked" onclick="hider('linux')">linux
<input type="radio" name="ostype" onclick="hider('solaris');">solaris
<div id="content">
<div id="linux">linux</div>
<div id="solaris" style="display:none;">solaris</div>
</div>
<script>
function hider(divname) {
$('#content div').each(function(){
$(this).hide();
});
$('#'+divname).show();
}
</script>
</body>
</html>
回答by yurin
Bind change event to ALL radio buttons on document ready:
将更改事件绑定到文档准备好的所有单选按钮：
$(function(){
$('input[name=list_type]:radio').on("change", function(){
showHideBlock();
});
showHideBlock();
});
Show -- hide block depends on ONE radio button status:
显示 -- 隐藏块取决于一个单选按钮状态：
function showHideBlock(){
if ($("#Option").is(':checked')){
$('#Block').show();
} else {
$('#Block').hide();
}
}
}
回答by JJeff
If I understand you correctly you can just use an onClick on every button and hide the others while showing the one your clicking on. Like this:
如果我理解正确，您可以在每个按钮上使用 onClick 并隐藏其他按钮，同时显示您单击的按钮。像这样：
function showInfo(info)
{
var info = document.getElementById("1");
info.style.display = "block";
var info = document.getElementById("2");
info.style.display = "none";
}
So the first one is showing and the second one is hiding. Then just add one for every div that should be hidden.
所以第一个显示，第二个隐藏。然后只需为每个应该隐藏的 div 添加一个。
You can also do this with jQuery.
您也可以使用 jQuery 执行此操作。
function showAndHide(val1, val2)
{
$(val1).hide();
$(val2).show();
}
And don't forget to have style="display:none" in every div.
并且不要忘记在每个 div 中都有 style="display:none"。
回答by Struppi
did you declare the vars solaris and linux? otherwise your browser should show you an Error
你声明了 vars solaris 和 linux 吗？否则你的浏览器会显示一个错误
