Best way to toggle radio input and call a javascript function-CodePudding

I have a form with radio buttons, and I'd like to show/hide a div when people click each of the radio options. The code below works per se, but it's buggy, ie: it'll work if I hard refresh the page, but other times it will only show/hide the div but it won't toggle between the radio inputs. I usually call this function inside a but this is the first I'm trying to have it called when a user clicks on a form element. Is there a better way of calling the function so that it will always work as expected?

<label  onm ousedown="toggleSlide('taxagentdet');" id="ag1">No
  <input id="form18" type="radio" name="TaxAgent" value="0">
  <span ></span>
</label>
<label  onm ousedown="toggleSlide('taxagentdet');" id="ag2">Yes
  <input id="form19" type="radio" name="TaxAgent" value="1">
  <span ></span>
</label>

CodePudding user response：

TL;DR. Use the built-in HTML structure as much as possible

See the sample code snippet below. In it, form element wraps two radio input elements of the same name, and you can use JavaScript to listen for its change event rather than detecting individual mousedown. This will also enable users to use keyboard to toggle between radios.

const form = document.querySelector('form');
const div = document.querySelector('.content');

form.addEventListener('change', e => {
  // Do whatever you need to do to toggle
  const toggleStatus = e.target.value === "yes" ? "Toggle On" : "Toggle Off";
  div.innerText = toggleStatus;
});

<form>
  <label for="no"><input type="radio" id="no" name="toggle" value="no">No</label>
  <label for="yes"><input type="radio" id="yes" name="toggle" value="yes">Yes</label>
</form>
<div  style="padding: 20px; margin-top: 20px; box-shadow: 0 1px 15px rgba(0,0,0,.2); width: 150px;">
  Unselected
</div>

CodePudding user response：

function toggleDiv(toggleType) {
let el = document.getElementById("div_content");
    if(toggleType == 'yes')  el.style.display="block";
  if(toggleType == 'no')  el.style.display="none";
}

<input type="radio" onChange="toggleDiv('yes')" name="Yes" id="yes" checked="true"> <label for="yes" >YES</label>
<input type="radio" onChange="toggleDiv('no')" name="Yes" id="no"> <label for="no">NO</label>

<div id="div_content">
DIV Content
</div>