How can i make radio button unselect

Question

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 ?

http://jsfiddle.net/f4vXj/2/ (https://stackoverflow.com/questions/2117538/how-to-uncheck-a-radio-button) — Ammar Aslam, Nov 25 '21 at 14:28

score 3 · Accepted Answer · answered Nov 25 '21 at 14:10

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>

score 1 · Answer 2 · answered Nov 25 '21 at 14:13

Your approach is not right. By reading https://en.wikipedia.org/wiki/Radio_button you can understand that the purpose of the radio button is to choose only one value from a list of items. If you want to have the check/uncheck behavior you should use checkboxes and apply styles to look like radio buttons.

How can i make radio button unselect

2 Answers2