如何创建多个单选按钮选择？HTML Javascript

我想创建，如果用户选择单一，他们只能选择一条边。但如果他们选择了小组。它们可以是多个边缘。是不是我需要使用Jquery

目前，如果我选择单个或组，它仍然没有不同的地方，我仍然无法选择多个单选按钮。我想选择单个用于一次检查，组用于多次检查。如何解决这个问题

这是我的密码

<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>

PC选择单/组边缘


单身
团体


选择边


边缘1
边缘2
边缘3

如果您确实需要使用单选按钮，请尝试以下操作：

HTML:

工作小提琴：

根据问题的答案，上述代码采用以下方法：

将“Single”和“Group”设置为相同的名称属性值-因此只能选择其中一个

如果选择“单个”，则将所有边缘单选按钮的名称属性设置为相同的值。这利用了同名单选按钮的默认行为。只能选择一个边缘按钮

如果选择了“组”，请删除“名称”属性。这允许选择所有边缘按钮。通过使用上述答案中提到的单选切换方法，您可以切换单选按钮

以下几行：

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

---

当从“单个”切换到“组”时，是否存在奇怪的不一致性？

由于您的单选按钮

name

相同，您一次只能选择一个单选按钮。另外，请指定不同的名称或使用复选框。还可以添加您在提问中尝试过的jquery代码。此复选框解决方案可能是解决问题的最佳方法。

$('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);
          }
              
        })
    }
});

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