How to creata multiple radio button selection? HTML Javascript

I want to create, if user select single, they only can select one edge. But if they select group. they can multiple edge. Is it I need to use Jquery.

Currently, if I select single or group, it still have no different where I still cannot select multiple radio button. I want to select single is for one check, group is for multiple check. How to solve this?

This is my code.

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

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:

1. Set "Single" and "Group" to the same name attribute value - thus only one of these can be selected.
2. 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.
3. 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".