通过选项卡选择单选按钮

Question

页面上有3个手风琴，每个中都有4-5个单选按钮。全部具有相同的名称组。初始化时，第一手风琴的第一台收音机已经被选中。

通过按下选项卡选择单选按钮时，第二个手风琴将打开。但是在按下下一个选项卡时，它会跳过单选按钮，然后继续前进到下一个手风琴。

这是因为用户只能选择一个具有相同名称的选项。

我想要的是第二个选项应该可以通过制表键选择，但是name属性应该保持不变。这是条件，不能更改，因为它有很多依赖性。我们怎样才能做到这一点？

我向收音机添加了tabindex值，但是没有用。

Answer 1

编辑：这里给一个旋转！

这将识别出手风琴是否具有可制表的输入，不仅如此，而且如果通过制表键打开且未打开，它也会为您打开手风琴，但又具有可制表的输入，您不希望您的用户错过输入值的输入。

我希望我能够为此指导我正确的方向。

$('button').keydown(function(e) {
  var code = (e.keyCode ? e.keyCode : e.which);
  if (code == 9) {
    var visibleAccordionInputs = $(this.nextElementSibling).find($(`input[type][tabindex != '-1']:visible`));

    var hiddenAccordionInputs = $(this.nextElementSibling).find($(`input[type][tabindex != '-1']:hidden`));

    if (hiddenAccordionInputs.length) {
      alert('pressed tab on an accordian with tabbable inputs that are not visible, lets open the accordion.');
      $(this.nextElementSibling).show();
    }


    if (visibleAccordionInputs.length) {
      alert('pressed tab on an accordian with visible tabbable inputs')
      visibleAccordionInputs[0].focus();
    }

  }
});

function toggleAccordion(elem) {
  var accordionContent = $(elem.nextElementSibling);

  accordionContent.toggle();
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">

<div class="w3-container">

  <h2>Accordions</h2>
  <p>An accordion is used to show (and hide) HTML content:</p>

  <button class="w3-btn w3-block w3-black w3-left-align" onClick="toggleAccordion(this)">Open Section 1</button>
  <div class="w3-container">
    <h4>Section 1</h4>
    <p>Some text..</p>
  </div>

  <button class="w3-btn w3-block w3-black w3-left-align" onClick="toggleAccordion(this)">Open Section 2</button>
  <div class="w3-container">
    <h4>Section 2</h4>
    <p>Some text..</p>
    <div class="w3-row">
      <div class="w3-half">
        <input id="milk" class="w3-check" type="checkbox" checked="checked">
        <label>Milk</label>
        <br>
        <input id="sugar" class="w3-check" type="checkbox">
        <label>Sugar</label>
        <br>
        <input id="lemon" class="w3-check" type="checkbox" disabled="">
        <label>Lemon (Disabled)</label>
        <br><br>
      </div>

      <div class="w3-half">
        <input id="male" class="w3-radio" type="radio" name="gender" value="male" checked="">
        <label>Male</label>
        <br>
        <input id="female" class="w3-radio" type="radio" name="gender" value="female">
        <label>Female</label>
        <br>
        <input id="unknown" class="w3-radio" type="radio" name="gender" value="" disabled="">
        <label>Don't know (Disabled)</label>
      </div>
    </div>
  </div>
</div>