'How to do toggle two mutually exclusive radio buttons in HTML

I have two radio buttons. When I click on one, the other should become unchecked, and vice versa.

The code I've produced so far is not working:

<input type="radio" id="rbdemail" onclick="chekrbdclick()" checked="checked" />
<input type="radio" id="rbdsitelnk" onclick="chekrbdclick()" />

function chekrbdclick() 
{
  // How to manage here?
}
javascripthtml


Solution 1:[1]

<form>
  <label>
    <input type="radio" name="size" value="small" checked> Small
  </label>
  <br>
  <label>
    <input type="radio" name="size" value="large"> Large
  </label>
</form>

Give them a name attribute with common value like size, and it will work. For best practice, you can place your input tag inside a label tag, so that, even if your user clicks on the text beside the button (ie on "Small" or "Large"), the respective radio button gets selected.

Solution 2:[2]

The perfect answer is above answered ,but I wanna share you how it can work by javascript ,this is javascript work (not standard answer) ....

    <input type="radio" id="rbdemail" onclick="chekrbdclick(0)" checked="checked" value="Small" />Small<br>
    <input type="radio" id="rbdsitelnk" onclick="chekrbdclick(1)" value="Large" />Large
    <script>
    function chekrbdclick(n) 
    {
      var small = document.getElementById('rbdemail');
      var large = document.getElementById('rbdsitelnk');
     if(n === 0){  
      small.checked = true;  
      large.checked = false;
     }
     else {   
      small.checked = false;  
      large.checked = true;
     }
    }
    </script>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 user229044
Solution 2 user229044

Related Questions