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>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe> For example if i want to unselect the value i can't, can this be fixed in html or i need js for this ?

CodePudding user response：

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>

<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

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>

<iframe name="sif3" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

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.