Radyo düğmesi için onChange olay işleyicisi (INPUT type = “radio”) tek bir değer olarak çalışmıyor

Bunun için genelleştirilmiş bir çözüm arıyorum.

Aynı ada sahip 2 radyo tipi girişi düşünün. Gönderildiğinde, işaretlenen formla birlikte gönderilen değeri belirler:

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

Bir radyo düğmesinin seçimi kaldırıldığında change olayı başlatılmaz. Dolayısıyla, = "1" değerine sahip telsiz zaten seçiliyse ve kullanıcı ikinciyi seçerse, handleChange1 () çalışmaz. Bu da (benim için zaten) bir sorun yaratıyor, çünkü bu seçim seçimini yakalayabileceğim bir olay yok.

Ne istiyorum onay kutusu grup değeri için onchange olay veya alternatif olarak sadece bir radyo kontrol edildiğinde değil, aynı zamanda işaretli değil algılar bir oncheck olay için bir geçici çözümdür.

Eminim ki bazılarınız daha önce bu problemle karşılaştı. Bazı geçici çözümler nelerdir (ya da ideal olarak bununla başa çıkmanın doğru yolu nedir)? Sadece change olayını yakalamak, daha önce kontrol edilen radyoya ve yeni kontrol edilen radyoya erişmek istiyorum.

PS
onclick, bir radyonun ne zaman kontrol edildiğini belirtmek için daha iyi (çapraz tarayıcı) bir olay gibi görünüyor, ancak yine de kontrol edilmemiş sorunu çözmüyor.

Bir onay kutusu türü için onchange neden böyle bir durumda işe yaradığını, çünkü kontrol veya işaretini kaldırdığınızda gönderdiği değeri değiştirdiğini düşünüyorum. Radyo düğmelerinin bir SELECT elemanının değişmesi gibi davranmasını isterdim, ancak ne yapabilirsiniz?

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>

İşte bir JSFiddle demosu: https://jsfiddle.net/crp6em1z/

İki değişiklik yapardım:

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

1. Kullanım onclickyerine işleyicisi onchange- Radyo girişinin "işaretli devlet" değiştiriyoruz değil value, bu yüzden bir değişiklik olay oluyor orada değil.
2. Tek bir işlev kullanın ve thiso anda seçili değerin kontrol edilmesini kolaylaştıracak bir parametre olarak iletin.

ETA: handleClick()İşlevinizle birlikte , telsizin orijinal / eski değerini sayfa kapsamındaki bir değişkende izleyebilirsiniz. Yani:

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

Bu örnekten de görebileceğiniz gibi: 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);
});

bir radyo düğmesi seçeneği seçildiğinde hem clickve changeolaylar tetiklenir (en azından bazı tarayıcılarda).

Ayrıca, clickörneğimde , bir seçenek belirlemek için sekmeyi ve klavyeyi kullandığınızda olayın hala tetiklendiğini belirtmeliyim.

Demek istediğim, changeolay tetiklendiğinde bazı tarayıcılar olsa da, etkinliğin clickihtiyacınız olan kapsamı sağlaması gerekir.

Jquery'nin değişiklik olayını kullanmaya ne dersiniz?

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

Burada görebileceğiniz gibi: http://www.w3schools.com/jsref/event_onchange.asp Değiştirme özelliği radyo düğmeleri için desteklenmez.

Tarafınızdan bağlanan ilk SO sorusu size cevap verir: onclickBunun yerine olayı kullanın ve tetiklediği işlevin içindeki radyo düğmesi durumunu kontrol edin.

Önceki durumu depolamaktan başka bir yol olduğunu düşünmüyorum. İşte jQuery ile çözüm

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

Biraz daha düşündükten sonra, değişkenten kurtulmaya ve sınıf ekle / kaldırmaya karar verdim. İşte ne var: http://jsfiddle.net/BeQh3/2/

Evet, seçili olan radyo düğmesi için değişiklik etkinliği yoktur. Ancak sorun, her radyo düğmesinin ayrı bir öğe olarak alınmasıdır. Bunun yerine bir radyo grubu gibi tek bir unsur olarak düşünülmelidir select. Bu nedenle değişiklik grubu o grup için tetiklenir. Bir öğeyse, selectiçindeki her seçenek hakkında asla endişelenmeyiz, sadece seçilen seçeneği alırız. Mevcut değeri, yeni bir seçenek belirlendiğinde önceki değer olacak bir değişkende saklarız. Benzer şekilde, kontrol edilen radyo düğmesinin değerini saklamak için ayrı bir değişken kullanmanız gerekir.

Önceki radyo düğmesini tanımlamak istiyorsanız, mousedownetkinliğe geri dönmeniz gerekir .

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

bakınız: http://jsfiddle.net/diode/tywx6/2/

Önceki kontrol edilen radyoyu bir değişkende saklayın:
saklayın 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 ÖRNEK KODU

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

Bunun eski bir sorun olduğunun farkındayım, ancak bu kod snippet'i benim için çalışıyor. Belki de gelecekte biri yararlı bulacaktır:

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

Bu sadece başımın üstündedir, ancak her radyo düğmesi için bir onClick olayı yapabilir, onlara farklı kimlikler verebilir ve ardından gruptaki her radyo düğmesinden geçmek ve hangisinin olduğunu bulmak için bir for döngüsü yapabilirsiniz. "işaretli" özelliğe bakarak kontrol edildi. İşaretli olanın kimliği bir değişken olarak saklanır, ancak tıklama değişkeninin yeni bir radyo düğmesi işaretli olsa da olmasa da tetikleneceğinden, bu değişkenin değerinin değiştiğinden emin olmak için önce geçici bir değişken kullanmak isteyebilirsiniz.

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

Satır içi komut dosyasından kaçınmak istiyorsanız, radyodaki bir tıklama etkinliğini dinleyebilirsiniz. Bu, üzerinde bir tıklama etkinliğini dinleyerek düz Javascript ile gerçekleştirilebilir

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

Aşağıdaki JS komut dosyasını ekleyebilirsiniz

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

bu benim için çalışıyor

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

Bu, kullanımı en kolay ve en verimli işlevdir, sadece check = false seçeneğine istediğiniz kadar düğme ekleyin ve her radyo düğmesinin onclick olayını bu işlevi çağırın. Her radyo düğmesine benzersiz bir numara atayın

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

En kolay ve tam yol gücü

getAttribute kullanarak salt okunur radyo girişleri

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