Onchange Event Handler for Radio Button (Input Type="Radio") Doesn't Work as One Value

function myFunction() {

  let var1 = document.querySelector("input[name=radioa]:checked")?.value;
  let var2 = document.querySelector("input[name=radiob]:checked")?.value;

  if (var1 && var2) output = var1 + " and " + var2;
  else output = "Please select both a number and a letter";
  document.getElementById("change").innerHTML = output;
}

<div>
  <p>Wich number will you choose ?</p>
  <input id="one" name="radioa" type="radio" value="Number 1" />
  <label for="one">The N° 1</label>
  <input id="two" name="radioa" type="radio" value="Number 2" />
  <label for="two">The N° 2</label>
</div>
<div>
  <p>Wich letter will you choose ?</p>
  <input id="a" name="radiob" type="radio" value="Letter a" />
  <label for="a">The letter a</label>
  <input id="b" name="radiob" type="radio" value="Letter b" />
  <label for="b">The lettter b</label>
</div>
<div>
  <button id="z" onclick="myFunction();">button</button>
</div>
<div>You have chosen :</div>
<div id="change"></div>

onchange on radiobutton not working correctly in IE8

In Internet Explorer (up to at least IE8) clicking a radio button or checkbox to change its value does not actually trigger the onChange event until the the input loses focus.

Thus you need to somehow trigger the blur event yourself.. one suggestiong would be to have a function: as follows:

function radioClick()
{
 this.blur();  
 this.focus();  
}


<input type="radio" name="rad" value="1" onclick="radioClick" onchange="alert(1);"/>

Now your onchange event should be triggered but as you can see it is redundant code thus you are better off just using the onclick event handler.

The better solution is to use a modern javascript library like jquery which handles all these quirks for you..

How do I trigger a change event on radio buttons in react-testing-library?

Update

As people pointed out my original solution was wrong.

Nowadays I suggest you use userEvent for better-simulating user interactions.

import { render, screen } from "@testing-library/react";
import userEvent from "@testing-library/user-event";

test("radio", () => {
  const user = userEvent.setup();
  render(
    <form>
      <label>
        First <input type="radio" name="radio1" value="first" />
      </label>
      <label>
        Second <input type="radio" name="radio1" value="second" />
      </label>
    </form>
  )

  await user.click(screen.getByLabelText("Second"));
});

First, you don't have to call rerender. You use rerender only when you want the component to receive different props. See link.

Whenever you call fireEvent the component will render like it would in your normal app.

It's correct to fire a change event, but you must pass a second parameter with the event data.

This example works:

import React from "react";
import { render, fireEvent } from "react-testing-library";

test("radio", () => {
  const { getByLabelText } = render(
    <form>
      <label>
         First <input type="radio" name="radio1" value="first" />
      </label>
      <label>
        Second <input type="radio" name="radio1" value="second" />
      </label>
    </form>
  );

  const radio = getByLabelText('First')
  fireEvent.change(radio, { target: { value: "second" } });
  expect(radio.value).toBe('second')
});

Related Topics