Handler event OnChange untuk tombol radio (INPUT type = "radio") tidak berfungsi sebagai satu nilai

Saya mencari solusi umum untuk ini.

Pertimbangkan 2 input jenis radio dengan nama yang sama. Saat dikirimkan, yang diperiksa menentukan nilai yang dikirim dengan formulir:

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

Acara perubahan tidak menyala ketika tombol radio tidak dipilih. Jadi jika radio dengan nilai = "1" sudah dipilih dan pengguna memilih yang kedua, handleChange1 () tidak berjalan. Ini menghadirkan masalah (bagi saya toh) karena tidak ada peristiwa di mana saya dapat menangkap seleksi-de ini.

Apa yang saya inginkan adalah solusi untuk acara onchange untuk nilai grup kotak centang atau sebagai alternatif aktivitas oncheck yang mendeteksi tidak hanya ketika radio dicentang tetapi juga saat tidak dicentang.

Saya yakin beberapa dari Anda pernah mengalami masalah ini sebelumnya. Apa saja pemecahan masalah (atau idealnya apa cara yang tepat untuk menangani ini)? Saya hanya ingin menangkap perubahan acara, mengakses radio yang sebelumnya diperiksa serta radio yang baru diperiksa.

PS
onclick sepertinya acara (lintas-peramban) yang lebih baik untuk menunjukkan kapan radio diperiksa tetapi masih tidak menyelesaikan masalah yang tidak dicentang.

Saya kira masuk akal mengapa pertukaran untuk jenis kotak centang tidak berfungsi dalam kasus seperti ini karena ini mengubah nilai yang dikirimkan ketika Anda memeriksa atau tidak mencentangnya. Saya berharap tombol radio berperilaku lebih seperti pertukaran elemen SELECT tetapi apa yang dapat Anda lakukan ...

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>

Berikut ini demo JSFiddle: https://jsfiddle.net/crp6em1z/

Saya akan membuat dua perubahan:

<input type="radio" name="myRadios" onclick="handleClick(this);" value="1" />
<input type="radio" name="myRadios" onclick="handleClick(this);" value="2" />

1. Gunakan onclickhandler alih-alih onchange- Anda mengubah "status dicentang" dari input radio, bukan value, jadi tidak ada perubahan yang terjadi.
2. Gunakan fungsi tunggal, dan lulus thissebagai parameter, yang akan memudahkan untuk memeriksa nilai mana yang saat ini dipilih.

ETA: Seiring dengan handleClick()fungsi Anda, Anda dapat melacak nilai asli / lama radio dalam variabel cakupan halaman. Itu adalah:

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

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

<input type="radio" name="myRadios" onclick="handleClick(this);" value="1" />
<input type="radio" name="myRadios" onclick="handleClick(this);" value="2" />

Seperti yang Anda lihat dari contoh ini: 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);
});

baik acara clickdan changedipecat ketika memilih opsi tombol radio (setidaknya di beberapa browser).

Saya juga harus menunjukkan bahwa dalam contoh saya clickacara masih dipecat ketika Anda menggunakan tab dan keyboard untuk memilih opsi.

Jadi, maksud saya adalah bahwa meskipun changeacara dipecat adalah beberapa browser, clickacara tersebut harus menyediakan cakupan yang Anda butuhkan.

Bagaimana dengan menggunakan acara perubahan Jquery?

$(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/

Seperti yang Anda lihat di sini: http://www.w3schools.com/jsref/event_onchange.asp Atribut onchange tidak didukung untuk tombol radio.

Pertanyaan SO pertama yang ditautkan oleh Anda memberi Anda jawabannya: Gunakan onclickacara itu dan periksa status tombol radio di dalam fungsi yang dipicunya.

Saya tidak berpikir ada cara lain selain menyimpan keadaan sebelumnya. Ini solusinya dengan 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" />

Setelah memikirkannya sedikit lebih banyak, saya memutuskan untuk menyingkirkan variabel dan menambah / menghapus kelas. Inilah yang saya dapatkan: http://jsfiddle.net/BeQh3/2/

Ya tidak ada perubahan acara untuk tombol radio yang dipilih saat ini. Tetapi masalahnya adalah ketika setiap tombol radio diambil sebagai elemen yang terpisah. Sebagai gantinya grup radio harus dianggap sebagai elemen tunggal select. Jadi perubahan acara dipicu untuk grup itu. Jika itu adalah selectelemen, kami tidak pernah khawatir tentang setiap opsi di dalamnya, tetapi hanya mengambil opsi yang dipilih. Kami menyimpan nilai saat ini dalam variabel yang akan menjadi nilai sebelumnya, ketika opsi baru dipilih. Demikian pula Anda harus menggunakan variabel terpisah untuk menyimpan nilai tombol radio yang diperiksa.

Jika Anda ingin mengidentifikasi tombol radio sebelumnya, Anda harus mengulang mousedownacara.

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

lihat ini: http://jsfiddle.net/diode/tywx6/2/

Simpan radio yang diperiksa sebelumnya dalam sebuah variabel:
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);

KODE CONTOH 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);

Saya menyadari ini adalah masalah lama, tetapi potongan kode ini cocok untuk saya. Mungkin seseorang di masa depan akan merasakan manfaatnya:

<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>

Ini tepat di atas kepala saya, tetapi Anda bisa melakukan acara onClick untuk setiap tombol radio, berikan semua ID yang berbeda, dan kemudian buat loop untuk acara tersebut melalui setiap tombol radio dalam grup dan temukan yang mana diperiksa dengan melihat atribut 'diperiksa'. Id dari yang dicentang akan disimpan sebagai variabel, tetapi Anda mungkin ingin menggunakan variabel temp terlebih dahulu untuk memastikan bahwa nilai variabel itu berubah, karena acara klik akan menyala apakah tombol radio baru diperiksa atau tidak.

<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>

Jika Anda ingin menghindari skrip inline, Anda cukup mendengarkan acara klik di radio. Ini dapat dicapai dengan Javascript biasa dengan mendengarkan acara klik pada

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

Anda dapat menambahkan skrip JS berikut

<script>
    function myfunction(event) {
        alert('Checked radio with ID = ' + event.target.id);
    }
    document.querySelectorAll("input[name='gun']").forEach((input) => {
        input.addEventListener('change', myfunction);
    });
</script>

ini bekerja untuk saya

<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>

Ini adalah fungsi termudah dan paling efisien untuk digunakan, cukup tambahkan tombol sebanyak yang Anda inginkan ke tanda centang = false dan buat acara klik setiap tombol radio untuk memanggil fungsi ini. Tentukan nomor unik untuk setiap tombol radio

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

Cara termudah dan penuh daya

hanya baca input radio menggunakan getAttribute

document.addEventListener('input',(e)=>{

if(e.target.getAttribute('name')=="myRadios")
console.log(e.target.value)
})

<input type="text"  value="iam text" /> 
<input type="radio" name="myRadios" value="1" /> 1
<input type="radio" name="myRadios" value="2" /> 2