12

我有几个单选按钮应该叫 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');
 }
}
4

7 回答 7

7

由于这个问题仍未得到正确回答，但我在 Google 中的“单选按钮 onchange”排名很高，对于仍在寻找的任何人来说，这里都是一个合适的解决方案。

如果您使用 jQuery，只需使用Flavius Stef所述的jQuery属性选择器。

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

后一个函数使用toggleClass来设置“已检查”类 if .is(":checked")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 事件时都要小心，因为当通过键盘导航激活输入时它不会触发。

于 2013-08-03T15:43:06.227 回答
4

使用onclick.

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

<input name="ostype" type="radio" value="0" onclick="hider(this);">solaris
于 2011-01-25T15:38:18.787 回答
1

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

$(function(){

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

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

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

}

于 2014-08-18T14:16:42.423 回答
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>
于 2011-01-25T15:36:25.647 回答
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 加上引号

于 2011-01-25T15:48:26.423 回答
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" 。

于 2012-11-28T10:15:18.523 回答
-1

你声明了 vars solaris 和 linux 吗？否则您的浏览器会显示错误

于 2011-01-25T15:49:07.990 回答