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

Question

我想创建，如果用户select单身，他们只能select一个边缘。但是如果他们select组。他们可以多重优势。我需要使用 Jquery.

目前，如果我 select 单个或组，它仍然没有什么不同，我仍然不能 select 多个单选按钮。我要select single 是一次check，group 是multiple check。如何解决？

这是我的代码。

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

工作fiddle：https://jsfiddle.net/gfxh8t7a/40/

根据问题 "How can I toggle radiobutton" 的答案，上述代码采用以下方法：

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

以下几行：

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

在从“单一”切换到“群组”时不会出现奇怪的不一致。

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

How to creata multiple radio button selection? HTML Javascript

html

javascript

jquery

radio-group

radio-button