ตัวจัดการเหตุการณ์ OnChange สำหรับปุ่มตัวเลือก (INPUT type =“ radio”) ไม่ทำงานเป็นค่าเดียว

ฉันกำลังมองหาโซลูชันทั่วไปสำหรับสิ่งนี้

พิจารณาอินพุตประเภทวิทยุ 2 อันที่มีชื่อเดียวกัน เมื่อส่งแล้วสิ่งที่ถูกตรวจสอบจะกำหนดค่าที่ส่งมาพร้อมกับแบบฟอร์ม:

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

เหตุการณ์การเปลี่ยนแปลงจะไม่ทำงานเมื่อยกเลิกการเลือกปุ่มตัวเลือก ดังนั้นหากวิทยุที่มีค่า = "1" ถูกเลือกอยู่แล้วและผู้ใช้เลือกรายการที่สอง handleChange1 () จะไม่ทำงาน นี่นำเสนอปัญหา (สำหรับฉันต่อไป) ในกรณีที่ไม่มีเหตุการณ์ที่ฉันสามารถตรวจจับสิ่งที่เลือกได้

สิ่งที่ฉันต้องการเป็นวิธีแก้ปัญหาสำหรับเหตุการณ์ onchange สำหรับค่ากลุ่มช่องทำเครื่องหมายหรืออีกวิธีหนึ่งคือเหตุการณ์ oncheck ที่ตรวจจับไม่เพียง แต่เมื่อมีการตรวจสอบวิทยุ แต่ยังเมื่อไม่ได้ตรวจสอบ

ฉันแน่ใจว่าคุณบางคนเคยพบปัญหานี้มาก่อน มีวิธีแก้ไขปัญหาอะไรบ้าง (หรือนึกคิดว่าวิธีที่เหมาะสมในการจัดการกับปัญหานี้คืออะไร) ฉันแค่ต้องการที่จะจับเหตุการณ์การเปลี่ยนแปลงเข้าถึงวิทยุที่ตรวจสอบก่อนหน้านี้เช่นเดียวกับวิทยุที่ตรวจสอบใหม่

PS
onclick ดูเหมือนจะเป็นเหตุการณ์ที่ดีกว่า (เบราว์เซอร์ข้าม) เพื่อระบุว่ามีการตรวจสอบวิทยุเมื่อใด แต่ก็ยังไม่สามารถแก้ปัญหาที่ไม่ได้ตรวจสอบได้

ฉันคิดว่ามันสมเหตุสมผลว่าทำไม onchange สำหรับประเภทช่องทำเครื่องหมายทำงานในกรณีเช่นนี้เนื่องจากมันเปลี่ยนค่าที่ส่งเมื่อคุณตรวจสอบหรือยกเลิกการตรวจสอบ ฉันหวังว่าปุ่มตัวเลือกจะทำงานเหมือนกับการเลือกองค์ประกอบของ SELECT แต่คุณจะทำอย่างไร ...

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/

ฉันจะทำการเปลี่ยนแปลงสองอย่าง:

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

1. ใช้onclickตัวจัดการแทนonchange- คุณกำลังเปลี่ยน "สถานะที่เลือก" ของอินพุตวิทยุไม่ใช่valueดังนั้นจึงไม่มีเหตุการณ์การเปลี่ยนแปลงเกิดขึ้น
2. ใช้ฟังก์ชั่นเดียวและผ่านthisเป็นพารามิเตอร์ที่จะทำให้ง่ายต่อการตรวจสอบค่าที่เลือกไว้ในปัจจุบัน

ETA: พร้อมกับhandleClick()ฟังก์ชั่นของคุณคุณสามารถติดตามค่าดั้งเดิม / ค่าเก่าของวิทยุในตัวแปรที่กำหนดขอบเขตหน้า นั่นคือ:

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

ตามที่คุณเห็นจากตัวอย่างนี้: 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ถูกไล่ออกเมื่อเลือกตัวเลือกปุ่มตัวเลือก (อย่างน้อยในบางเบราว์เซอร์)

ฉันควรชี้ให้เห็นว่าในตัวอย่างของฉันclickเหตุการณ์ยังคงถูกไล่ออกเมื่อคุณใช้แท็บและแป้นพิมพ์เพื่อเลือกตัวเลือก

ดังนั้นประเด็นของฉันคือแม้ว่าchangeเหตุการณ์จะเป็นเบราว์เซอร์บางclickเหตุการณ์ก็ควรให้ความคุ้มครองที่คุณต้องการ

แล้วการใช้เหตุการณ์การเปลี่ยนแปลงของ 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/

คุณสามารถดูได้ที่นี่: http://www.w3schools.com/jsref/event_onchange.asp แอตทริบิวต์ onchange ไม่รองรับปุ่มตัวเลือก

คำถาม SO แรกที่เชื่อมโยงโดยคุณให้คำตอบ: ใช้onclickเหตุการณ์แทนและตรวจสอบสถานะปุ่มตัวเลือกด้านในของฟังก์ชันที่ทริกเกอร์

ฉันไม่คิดว่าจะมีวิธีอื่นใดแล้วจัดเก็บสถานะก่อนหน้า นี่คือทางออกของ 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/

ใช่ไม่มีกิจกรรมการเปลี่ยนแปลงสำหรับปุ่มตัวเลือกที่เลือกในปัจจุบัน แต่ปัญหาคือเมื่อใช้ปุ่มตัวเลือกแต่ละปุ่มแยกองค์ประกอบ 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/

เก็บวิทยุที่ตรวจสอบก่อนหน้านี้ไว้ในตัวแปร:
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);

ฉันรู้ว่านี่เป็นปัญหาเก่า แต่โค้ดขนาดสั้นนี้เหมาะกับฉัน บางทีบางคนในอนาคตอาจพบว่ามีประโยชน์:

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

นี่เป็นเพียงส่วนหัวของฉัน แต่คุณสามารถทำกิจกรรม onClick สำหรับปุ่มตัวเลือกแต่ละปุ่มให้รหัสที่แตกต่างกันทั้งหมดจากนั้นทำการวนรอบในเหตุการณ์เพื่อให้ผ่านแต่ละปุ่มในกลุ่มและค้นหาว่า ถูกตรวจสอบโดยดูที่แอตทริบิวต์ 'ที่ตรวจสอบแล้ว' รหัสของการตรวจสอบจะถูกเก็บไว้เป็นตัวแปร แต่คุณอาจต้องการใช้ตัวแปรชั่วคราวก่อนเพื่อให้แน่ใจว่าค่าของตัวแปรนั้นเปลี่ยนไปเนื่องจากเหตุการณ์การคลิกจะเริ่มขึ้นไม่ว่าจะมีการตรวจสอบปุ่มตัวเลือกใหม่หรือไม่

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

หากคุณต้องการหลีกเลี่ยงสคริปต์แบบอินไลน์คุณสามารถฟังเหตุการณ์การคลิกทางวิทยุได้ สามารถทำได้ด้วย 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);
      }
}

คุณสามารถเพิ่มสคริปต์ JS ต่อไปนี้

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

มันใช้งานได้สำหรับฉัน

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

นี่คือฟังก์ชั่นที่ง่ายที่สุดและมีประสิทธิภาพมากที่สุดในการใช้เพียงแค่เพิ่มปุ่มมากเท่าที่คุณต้องการ = checked และทำให้เหตุการณ์ onclick ของปุ่มตัวเลือกแต่ละตัวเรียกฟังก์ชั่นนี้ กำหนดหมายเลขเฉพาะให้กับปุ่มตัวเลือกแต่ละปุ่ม

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

ง่ายที่สุดและเต็มไปด้วยพลัง

อ่านอินพุตวิทยุเท่านั้นโดยใช้ 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