onchange不使用单选按钮

时间:2011-01-25 15:34:33

标签: javascript jquery css radiobuttonlist

我有几个单选按钮,应该调用hider(某些东西);当他们改变时,意味着他们被检查或取消选中。这是有效的,即在检查时它们调用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');
 }
}

7 个答案:

答案 0 :(得分:7)

由于这个问题仍未得到正确解答,但在谷歌的“单选按钮更改”中对我来说排名很高,这对于仍在寻找的人来说是一个合适的解决方案。

如果您正在使用jQuery,请使用attribute selector所述的jQuery Flavius Stef

OP,你的代码所做的并不完全清楚。让我们假设你的代码中你想要将“隐藏”类添加到任何活动的单选按钮。

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

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

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

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

在复选框和单选按钮上侦听onchange

就我而言,我想在活动的单选按钮和复选框中添加“已检查”类。由于复选框在选中和取消选中时都会触发“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")));
});

如果.is(":checked")true,后一项功能会使用toggleClass来设置“已检查”类。

或者,您可能希望将这两个函数组合成以下内容:

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

答案 1 :(得分:3)

使用onclick

同样作为函数调用的参数,您需要使用带有id的字符串作为jQuery选择器('#solaris') - 更好的是使用this

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

答案 2 :(得分:0)

这是一个你可能从中获得灵感的版本(在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>

答案 3 :(得分:0)

<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放在引号

答案 4 :(得分:0)

如果我理解正确,您可以在每个按钮上使用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”。

答案 5 :(得分:0)

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

$(function(){

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

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

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

}

答案 6 :(得分:-1)

你宣布了vars solaris和linux吗? 否则你的浏览器应该显示错误