HTML Radio Buttons Allowing Multiple Selections

HTML radio buttons allowing multiple selections

They all need to have the same name attribute.

The radio buttons are grouped by the name attribute. Here's an example:

<fieldset>
    <legend>Please select one of the following</legend>
    <input type="radio" name="action" id="track" value="track" /><label for="track">Track Submission</label><br />
    <input type="radio" name="action" id="event" value="event"  /><label for="event">Events and Artist booking</label><br />
    <input type="radio" name="action" id="message" value="message" /><label for="message">Message us</label><br />
</fieldset>

Radio buttons selecting multiple options

you have to put them in a group.You can do it like this

<form action="">  <input type="radio" name="gender" checked> Male<br>  <input type="radio" name="gender" > Female<br>  <input type="radio" name="gender" > Other</form>

How to creata multiple radio button selection? HTML Javascript

If you really need to use radio buttons, try this:

HTML:

<div id="controlForm" class="form-container">
    
    <label for="application_status">
      <b>PC Selection Single/Group Edge</b>
    </label></br>
    <div id="pcSelect" class="form-inline">
      <div class="form-group">
        <div class="column">
          <div class="radio-inline">
            <input type="radio" class="radio_item"  value="single"  name="pc" id="single"> Single
          </div>
          <div class="radio-inline">
            <input type="radio" class="radio_item"  value="group"  name="pc" id="group"> Group
          </div><br>
        </div>
      </div>
      
      <label for="application_status">
      <b>Select Edge</b>
    </label></br>
    <div class="form-inline">
      <div class="form-group">
        <div class="column" id="edgeSelect" >
          <div class="radio-inline">
            <input type="radio" class="radio_item"  value="Edge1" id="edge1" data-waschecked="false"> Edge 1
          </div>
          <div class="radio-inline">
            <input type="radio" class="radio_item"  value="Edge2" id="edge2" data-waschecked="false"> Edge 2
          </div>
          <div class="radio-inline">
            <input type="radio" class="radio_item" value="Edge3" id="edge3" data-waschecked="false"> Edge 3
          </div></br>
        </div>
      </div>
    </div>

JavaScript:

$('input[type=radio][name=pc]').change(function() {
    if (this.value == 'single') {
        $("#edgeSelect input[type=radio]").attr('name', 'edge');
        $("#edgeSelect input[type=radio]").off()
    }
    else if (this.value == 'group') {
        $("#edgeSelect input[type=radio]").removeAttr('name');
        $("#edgeSelect input[type=radio]:not(:checked)").data('waschecked', false);
        $("#edgeSelect input[type=radio]:checked").data('waschecked', true);
        $("#edgeSelect input[type=radio]").on('click',  (e)=> {
          var $radio = $(e.target);

          // if this was previously checked
          if ($radio.data('waschecked') == true)
          {
            $radio.prop('checked', false);
            $radio.data('waschecked', false);
          }
          else {
            $radio.prop('checked', true);
            $radio.data('waschecked', true);
          }
              
        })
    }
});

Working fiddle: https://jsfiddle.net/gfxh8t7a/40/

Building off of the answer to the question "How can I toggle radiobutton", the above code takes the following approach:

Set "Single" and "Group" to the same name attribute value - thus only one of these can be selected.
If "Single" is selected, set the name attribute of all the Edge radio buttons to the same value. This utilizes the default behavior of radio buttons with the same name. Only one Edge button can be selected.
If "Group" is selected, remove the name attribute. This allows all Edge buttons to be selected. By using the radio toggle method mentioned in the answer above, you can toggle the radio buttons.

The following lines:

        $("#edgeSelect input[type=radio]:not(:checked)").data('waschecked', false);
        $("#edgeSelect input[type=radio]:checked").data('waschecked', true);

are there so that there are no odd inconsistencies when switching from "Single" to "Group".

Why can I check multiple radio buttons?

All radio buttons that share the same name and are controls in the same form are part of a group.

Only one radio button in a group can be checked.

You have two radio buttons with different names. This means that you have two radio groups, each containing one radio button.

You need to put them in the same group (by making them share a name) if you only want one of them to be selected.

(They should still have unique ids (so you can give each one a label) and values (which is how you determine which one was checked when the form is submitted to the server)).

<form>  <fieldset>    <legend>Thing that is being chosen</legend>
    <input type="radio" name="name" id="nameA" value="nameA">    <label for="nameA">Choice A</label>
    <input type="radio" name="name" id="nameB" value="nameB">    <label for="nameB">Choice B</label>
  </fieldset></form>

HTML radio buttons allow the selection of multiple options

MDN says:

A radio group is defined by giving each of radio buttons in the group the same name. Once a radio group is established, selecting any radio button in that group automatically deselects any currently-selected radio button in the same group.

For example, if your form needs to ask the user for their preferred contact method, you might create three radio buttons, each with the name property set to "contact" but one with the value "email", one with the value "phone", and one with the value "mail". The user never sees the value or the name (unless you expressly add code to display it).

So, it is because your radio buttons have different names, they should have the same name and different values.

Try giving radio buttons of the same group the same name value:

<form><fieldset>
<div class="col"><legend>Have you had your record expunged before?</legend><input type="radio" name="yes_or_no" id="yes" value="yes" /><label> yes</label></div>
<input type="radio" name="yes_or_no" id="no" value="no" /><label>  no </label>
</fieldset></form>

Radio button is selecting multiple

Assign a name attribute with the same value to all radiobuttons in the same group.

ex:

  <input type="radio" name="group1" data-ng-model="s.isSelected">{{s.id}}

How to allow only one radio button to be checked?

Simply give them the same name:

<input type="radio" name="radAnswer" />

HTML Radio Buttons Allowing Multiple Selections