How can i make radio button unselect

November 25, 2021

can somelone explain why i can’t unselect or select multiple times my radio button input ? Here is my code:

<div id="grade">
            <label id="gradeName">Grade</label>
            <input type="radio">
            <label for="">5</label>
            <input type="radio">
            <label for="">6</label>
            <input type="radio">
            <label for="">7</label>
            <input type="radio">
            <label for="">8</label>
            <input type="radio">
            <label for="">9</label>
            <input type="radio">
            <label for="">10</label>
</div>

For example if i want to unselect the value i can’t, can this be fixed in html or i need js for this ?

>Solution :

Radio buttons are designed so that at all times one member of the radio group is selected.

You have not checked one by default, so none start out in the checked state.

You have not given them names so they aren’t grouped (each is in a group consisting of just itself).

An an aside, a label is for labelling a single form control. You can’t use a label to label an entire radio button group. That is what the fieldset element is for.

<fieldset>
  <legend>Radio Example</legend>
  <label><input type="radio" name="groupName" value="1" checked> 1</label>
  <label><input type="radio" name="groupName" value="2"> 2</label>
  <label><input type="radio" name="groupName" value="3"> 3</label>
</fieldset>

If you want each button to have two states, so you can check and uncheck them freely, use checkboxes:

<fieldset>
  <legend>Checkbox Example</legend>
  <label><input type="checkbox" name="groupName" value="1" checked> 1</label>
  <label><input type="checkbox" name="groupName" value="2"> 2</label>
  <label><input type="checkbox" name="groupName" value="3"> 3</label>
</fieldset>