web-dev-qa-db-ja.com

ラジオボタンのOnChangeイベントハンドラ（INPUT type = "radio"）が1つの値として機能しない

私はこれのための一般化された解決策を探しています。

同じ名前の2つのラジオタイプ入力を考えてみましょう。送信されると、チェックされた値がフォームとともに送信される値を決定します。

<input type="radio" name="myRadios" onchange="handleChange1();" value="1" />
<input type="radio" name="myRadios" onchange="handleChange2();" value="2" />

ラジオボタンの選択が解除されてもchangeイベントは発生しません。そのため、value = "1"のラジオがすでに選択されていて、ユーザーが2番目のラジオを選択した場合、handleChange1（）は実行されません。これは私がこの選択解除を捕らえることができるイベントがないという点で（とにかく）問題を提示します。

私が欲しいのは、チェックボックスグループ値のonchangeイベント、またはラジオがチェックされたときだけでなくチェックされていないときも検出するoncheckイベントの回避策です。

私はあなたの何人かが前にこの問題に出くわしたと確信しています。いくつかの回避策は何ですか（または理想的にはこれを処理する正しい方法は何ですか）。変更イベントをキャッチし、先にチェックしたラジオと新しくチェックしたラジオにアクセスしたいだけです。

P.S.
onclickは、ラジオがいつチェックされるかを示すためのより良い（クロスブラウザ）イベントのように見えますが、それでもチェックされていない問題を解決しません。

チェックボックスタイプの変更は、チェックしたりチェックを外したりしたときに送信される値を変更するため、このような場合になぜうまくいくのかを理解することができると思います。ラジオボタンがSELECT要素のonchangeのように振舞うことを望みますが、あなたは何ができますか...

javascripthtmlcross-browser
151
Matthew
var rad = document.myForm.myRadios;
var prev = null;
for (var i = 0; i < rad.length; i++) {
    rad[i].addEventListener('change', function() {
        (prev) ? console.log(prev.value): null;
        if (this !== prev) {
            prev = this;
        }
        console.log(this.value)
    });
}
<form name="myForm">
  <input type="radio" name="myRadios"  value="1" />
  <input type="radio" name="myRadios"  value="2" />
</form>

これがJSFiddleデモです。 https://jsfiddle.net/crp6em1z/ /

145
Michal

2つの変更を加えます。

<input type="radio" name="myRadios" onclick="handleClick(this);" value="1" />
<input type="radio" name="myRadios" onclick="handleClick(this);" value="2" />
  1. onclickではなくonchangeハンドラを使用してください - valueではなく、ラジオ入力の「チェック状態」を変更しているので、changeイベントは発生しません。
  2. 単一の関数を使用し、パラメータとしてthisを渡すと、現在選択されている値を簡単に確認できます。

ETA：handleClick()関数と一緒に、ページスコープの変数でラジオの元の/古い値を追跡することができます。あれは：

var currentValue = 0;
function handleClick(myRadio) {
    alert('Old value: ' + currentValue);
    alert('New value: ' + myRadio.value);
    currentValue = myRadio.value;
}
94
Nate Cook

この例からわかるように、 http://jsfiddle.net/UTwGS/ /

HTML：

<label><input type="radio" value="1" name="my-radio">Radio One</label>
<label><input type="radio" value="2" name="my-radio">Radio One</label>

jQuery：

$('input[type="radio"]').on('click change', function(e) {
    console.log(e.type);
});

ラジオボタンオプションを選択すると（少なくとも一部のブラウザでは）、clickイベントとchangeイベントの両方が発生します。

また、私の例では、オプションを選択するのにtabとキーボードを使ったときにclick event がまだ発生している であることも指摘しておくべきです。

したがって、changeイベントが起動されるブラウザがいくつかあるにもかかわらず、clickイベントが必要なカバレッジを提供するはずです。

31
Philip Walton

前の状態を保存する以外に方法はないと思います。これがjQueryによる解決策です。

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 
<script type="text/javascript">
    var lastSelected;
    $(function () {
        //if you have any radio selected by default
        lastSelected = $('[name="myRadios"]:checked').val();
    });
    $(document).on('click', '[name="myRadios"]', function () {
        if (lastSelected != $(this).val() && typeof lastSelected != "undefined") {
            alert("radio box with value " + $('[name="myRadios"][value="' + lastSelected + '"]').val() + " was deselected");
        }
        lastSelected = $(this).val();
    });
</script>

<input type="radio" name="myRadios" value="1" />
<input type="radio" name="myRadios" value="2" />
<input type="radio" name="myRadios" value="3" />
<input type="radio" name="myRadios" value="4" />
<input type="radio" name="myRadios" value="5" />

もう少し考えた後、私は変数を取り除き、クラスを追加/削除することにしました。ここに私が得たものです： http://jsfiddle.net/BeQh3/2/

6
Alex Okrushko

私はこれが古い問題であることを認識していますが、このコードの断片は私には有効です。おそらく将来の誰かがそれが役に立つと思うでしょう：

<h2>Testing radio functionality</h2>
<script type="text/javascript">var radioArray=[null];</script>
<input name="juju" value="button1" type="radio" onclick="radioChange('juju','button1',radioArray);" />Button 1
<input name="juju" value="button2" type="radio" onclick="radioChange('juju','button2',radioArray);" />Button 2
<input name="juju" value="button3" type="radio" onclick="radioChange('juju','button3',radioArray);" />Button 3
<br />

<script type="text/javascript">
function radioChange(radioSet,radioButton,radioArray)
  {
  //if(radioArray instanceof Array) {alert('Array Passed');}
  var oldButton=radioArray[0];
  if(radioArray[0] == null)
    {
    alert('Old button was not defined');
    radioArray[0]=radioButton;
    }
  else
    {
    alert('Old button was set to ' + oldButton);
    radioArray[0]=radioButton;
    }
  alert('New button is set to ' + radioArray[0]);
  }
</script>
5
John K

Jqueryのchangeイベントを使うのはどうですか？

$(function() {
    $('input:radio[name="myRadios"]').change(function() {
        if ($(this).val() == '1') {
            alert("You selected the first option and deselected the second one");
        } else {
            alert("You selected the second option and deselected the first one");
        }
    });
});

jsfiddle： http://jsfiddle.net/f8233x20/ /

5
Razan Paul

ご覧のとおり、 http://www.w3schools.com/jsref/event_onchange.asp onchange属性はラジオボタンではサポートされていません。

最初にリンクされたSOの質問があなたに答えを与えます。代わりにonclickイベントを使用し、それが引き起こす関数の中のラジオボタンの状態をチェックしてください。

4
Connum

前回チェックしたラジオを変数に格納します。
http://jsfiddle.net/dsbonev/C5S4B/ /

HTML

<input type="radio" name="myRadios" value="1" /> 1
<input type="radio" name="myRadios" value="2" /> 2
<input type="radio" name="myRadios" value="3" /> 3
<input type="radio" name="myRadios" value="4" /> 4
<input type="radio" name="myRadios" value="5" /> 5

JS

var changeHandler = (function initChangeHandler() {
    var previousCheckedRadio = null;

    var result = function (event) {
        var currentCheckedRadio = event.target;
        var name = currentCheckedRadio.name;

        if (name !== 'myRadios') return;

        //using radio elements previousCheckedRadio and currentCheckedRadio

        //storing radio element for using in future 'change' event handler
        previousCheckedRadio = currentCheckedRadio;
    };

    return result;
})();

document.addEventListener('change', changeHandler, false);

JSコード例

var changeHandler = (function initChangeHandler() {
    var previousCheckedRadio = null;

    function logInfo(info) {
        if (!console || !console.log) return;

        console.log(info);
    }

    function logPrevious(element) {
        if (!element) return;

        var message = element.value + ' was unchecked';

        logInfo(message);
    }

    function logCurrent(element) {
        if (!element) return;

        var message = element.value + ' is checked';

        logInfo(message);
    }

    var result = function (event) {
        var currentCheckedRadio = event.target;
        var name = currentCheckedRadio.name;

        if (name !== 'myRadios') return;

        logPrevious(previousCheckedRadio);
        logCurrent(currentCheckedRadio);

        previousCheckedRadio = currentCheckedRadio;
    };

    return result;
})();

document.addEventListener('change', changeHandler, false);
4
Dimitar Bonev

はい現在選択されているラジオボタンに変更イベントはありません。しかし問題は、各ラジオボタンが別々の要素として扱われるときです。代わりにラジオグループはselectのような単一の要素と見なされるべきです。そのため、そのグループに対して変更イベントがトリガーされます。もしそれがselect要素であれば、その中の各オプションについて心配することはありませんが、選択されたオプションだけを取ります。新しいオプションが選択されると、現在の値を以前の値になる変数に格納します。同様に、チェックされたラジオボタンの値を格納するために別の変数を使わなければなりません。

前のラジオボタンを識別したい場合は、mousedownイベントをループする必要があります。

var radios = document.getElementsByName("myRadios");
var val;
for(var i = 0; i < radios.length; i++){
    if(radios[i].checked){
        val = radios[i].value;
    }
}

これを参照してください： http://jsfiddle.net/diode/tywx6/2/

4
Diode

これは私の頭から離れていますが、ラジオボタンごとにonClickイベントを実行し、それらにすべての異なるIDを指定してから、イベント内でforループを作成してグループ内の各ラジオボタンを調べ、どれが'checked'属性を見ることでチェックされました。チェックされたもののIDは変数として格納されますが、新しいラジオボタンがチェックされたかどうかにかかわらずclickイベントが発生するので、最初にその変数の値が変更されたことを確認するためにtemp変数を使用することができます。

2
Andrew Latham

インラインスクリプトを避けたい場合は、ラジオでクリックイベントを聞いてください。これは、普通のJavascriptでクリックイベントを聞くことで実現できます。

for (var radioCounter = 0 ; radioCounter < document.getElementsByName('myRadios').length; radioCounter++) {
      document.getElementsByName('myRadios')[radioCounter].onclick = function() {
        //VALUE OF THE CLICKED RADIO ELEMENT
        console.log('this : ',this.value);
      }
}
2
mareks
<input type="radio" name="brd" onclick="javascript:brd();" value="IN">   
<input type="radio" name="brd" onclick="javascript:brd();" value="EX">` 
<script type="text/javascript">
  function brd() {alert($('[name="brd"]:checked').val());}
</script>
2
umesh unnikrishnan

これは私のために働く

<input ID="TIPO_INST-0" Name="TIPO_INST" Type="Radio" value="UNAM" onchange="convenio_unam();">UNAM

<script type="text/javascript">
            function convenio_unam(){
                if(this.document.getElementById('TIPO_INST-0').checked){
                    $("#convenio_unam").hide();
                }else{
                    $("#convenio_unam").show(); 
                }                               
            }
</script>
1
Doberon

これは、checked = falseに必要な数のボタンを追加して、各ラジオボタンのonclickイベントにこの関数を呼び出させるだけの、最も簡単で効率的な関数です。各ラジオボタンに固有の番号を指定してください

function AdjustRadios(which) 
{
    if(which==1)
         document.getElementById("rdpPrivate").checked=false;
    else if(which==2)
         document.getElementById("rdbPublic").checked=false;
}
0
Jama