onchange 不适用于单选按钮

发布于 2024-10-14 08:43:49 字数 557 浏览 8 评论 0原文

我有一些单选按钮应该调用 hider(something);当它们发生变化时，即当它们被选中或取消选中时。这是有效的，即，当选中时，它们会调用 JS 函数，但是，如果由于从该组中选择另一个单选按钮而未选中它们，则它不会再次调用 js 脚本。

除了 onchange 之外，我还需要使用其他东西吗？

这是单选按钮目前的样子：

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

我的隐藏器功能当前是：

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

原文

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.

Do I need to use something else than 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');
 }
}

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

谢绝鈎搭 2024-10-21 08:43:50

如果我理解正确的话，您可以在每个按钮上使用 onClick 并隐藏其他按钮，同时显示您点击的按钮。
就像这样：

function showInfo(info)
    {
        var info = document.getElementById("1");
        info.style.display = "block";

        var info = document.getElementById("2");
        info.style.display = "none";

        }

所以第一个是显示的，第二个是隐藏的。
然后只需为每个应该隐藏的 div 添加一个即可。

您也可以使用 jQuery 来完成此操作。

function showAndHide(val1, val2)
        {
        $(val1).hide();
        $(val2).show();
        }

并且不要忘记在每个 div 中都有 style="display:none" 。

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:

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.

You can also do this with jQuery.

function showAndHide(val1, val2)
        {
        $(val1).hide();
        $(val2).show();
        }

And don't forget to have style="display:none" in every div.

回复收藏 0 原文

别忘他 2024-10-21 08:43:50

你声明了solaris和linux的变量吗？
否则你的浏览器应该显示错误

回复收藏 0 原文

玩套路吗 2024-10-21 08:43:49

由于这个问题仍然没有正确回答，但在谷歌中对我来说“单选按钮 onchange”的排名相当高，所以对于仍在寻找的人来说，这里有一个正确的解决方案。

如果您使用 jQuery，只需使用 jQuery 的属性选择器，如弗拉维乌斯·斯特夫。

OP，尚不完全清楚您的代码的作用。假设您希望在代码中将“隐藏”类添加到任何处于活动状态的单选按钮。

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

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

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

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

监听复选框和单选按钮上的 onchange

在我的例子中，我想向活动单选按钮和复选框添加一个“checked”类。由于复选框在选中和未选中时都会触发“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")));
});

后一个函数使用 toggleClass 设置“checked”类 if .is(":检查”） 为 true。

或者，您可能希望将这两个函数组合成类似的形式：

$('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 事件时都要小心，因为通过键盘导航激活输入时它不会触发。

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.

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

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");
});

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.

Listening for onchange on both checkboxes and radio buttons

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")));
});

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")));
});

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

回复收藏 0 原文

年少掌心 2024-10-21 08:43:49

将更改事件绑定到文档就绪的所有单选按钮：

$(function(){

   $('input[name=list_type]:radio').on("change", function(){   
       showHideBlock();
   });
   showHideBlock();    
});

显示 - 隐藏块取决于一个单选按钮状态：

function showHideBlock(){
   if ($("#Option").is(':checked')){
       $('#Block').show();
   } else {
       $('#Block').hide();
   }

}

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();
   }

}

回复收藏 0 原文

最美不过初阳 2024-10-21 08:43:49

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

function hider(divid) {
 $( 'div.div_class' ).hide();
 $( '#' + divid ).show();
}

确保添加一个类来调用 div，并确保在函数调用中将 Solaris 和 linux 加上引号

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

function 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

回复收藏 0 原文

情深已缘浅 2024-10-21 08:43:49

您可能会从以下版本中汲取灵感（在 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>

Here's a version that you might draw inspiration from (tested on Chrome and 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>

回复收藏 0 原文

~没有更多了~