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

Question

我想创建，如果用户选择单个，他们只能选择一个边缘。但是如果他们选择组。他们可以拥有多个优势。我需要使用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>

Answer 1

如果你真的需要使用单选按钮，试试这个：

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);
          }
              
        })
    }
});

工作小提琴：https://jsfiddle.net/gfxh8t7a/40/

基于问题"How can I toggle radiobutton"的答案，上面的代码采用以下方法：

1. 将“Single”和“Group”设置为相同的名称属性值 - 因此只能选择其中之一。
2. 如果选择“Single”，请将所有 Edge 单选按钮的名称属性设置为相同的值。这利用了具有相同名称的单选按钮的默认行为。只能选择一个边缘按钮。
3. 如果选择“组”，请删除名称属性。这允许选择所有边缘按钮。通过使用上面答案中提到的单选切换方法，您可以切换单选按钮。

以下几行：

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

这样在从“Single”切换到“Group”时不会出现奇怪的不一致。