web-dev-qa-db-ja.com

onchangeがラジオボタンで機能しない

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');
 }
}
javascriptjquerycssradiobuttonlist
11
Florian

この質問はまだ正しく答えられていませんが、Googleでは「ラジオボタンの変更」でかなり上位にランクされているので、これはまだ探している人のための適切な解決策です。

JQueryを使用している場合は、 Flavius Stef で示されているように、jQueryの 属性セレクター を使用してください。

OP、コードの機能が完全に明確ではありません。コードで、アクティブなラジオボタンに「非表示」クラスを追加するとします。

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

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

$(this)（jQueryオブジェクト）とthis（DOMオブジェクト）の違いに注意してください。基本的に、同じ名前のすべての入力から「hidden」クラスを削除してから、現在の入力に「hidden」クラスを追加します。

もちろん、ここでは、ページのさまざまな入力に重複した名前を使用していないことを前提としています。また、これはラジオボタンに対してのみ機能することに注意してください。ラジオボタンの「変更」イベントは、非アクティブ化されたときではなく、アクティブ化されたときにのみ発生するためです。

チェックボックスとラジオボタンの両方で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 を使用して「チェック済み」クラスを設定します。

または、2つの関数を次のように組み合わせることができます。

_$('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イベントをリッスンするときは常に注意してください。

7
Robbert

onclickを使用します。

また、関数呼び出しの引数として、jQueryセレクターとしてIDを持つ文字列を使用する必要があります（'#solaris'）-thisを使用することをお勧めします。

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

変更イベントをドキュメント準備完了のすべてのラジオボタンにバインドします。

$(function(){

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

表示-ブロックの非表示は、1つのラジオボタンのステータスによって異なります。

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

}

0
yurin

これがあなたがインスピレーションを引き出すかもしれないバージョンです（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>
0
Flavius Stef

私があなたを正しく理解している場合は、すべてのボタンでonClickを使用し、クリックしているボタンを表示しながら他のボタンを非表示にすることができます。このような：

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

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

        }

つまり、最初のものが表示され、2番目のものが非表示になっています。次に、非表示にする必要があるdivごとに1つ追加します。

JQueryを使用してこれを行うこともできます。

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

そして、すべてのdivにstyle = "display：none"があることを忘れないでください。

0
JJeff
<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を引用符で囲んでください。

0
Andrew Jackman