当所有输入共享相同的父 div 时，如何在单击时切换单选输入元素的检查状态？

Question

这个问题与之前在how-to-toggle-the-check-state-of-a-radio-input-element-on-click 上发布的问题非常相似，但那里共享的答案仅在每个输入元素位于其自己的单独 div 容器中时才有效；但是，我需要它适用于特定的 HTML 结构，其中所有径向输入都直接位于单个父 div 内的同一级别（我认为这可能是人们更常见的结构）。

在以下示例中，我将三个单选按钮用作选项卡式部分的选项卡。圆形按钮图像使用 CSS 隐藏，但当单选输入为：选中时，标签变为白色。这种特殊 HTML 结构的原因是，单选输入必须全部位于与选项卡部分的可显示内容相同但早于相同级别的同一父级下，以便隐藏内容随后显示在按钮之后，使用 CSS 选择器，例如：#tab-1:checked ~ #tab-content-1{display:block}。

因此，虽然给定的 CSS 并非绝对需要为本示例提供，但包含它是为了表明保持 HTML 结构完整的原因。

代码如下：

/* The attributes in .tab-container are likely non-essential*/
.tab-container{
  display:block; 
  margin:1rem;
}
.tab-label {
  display:inline-block;
  background: #eee; 
  border: 1px solid; 
}
[name="tab-group-1"] {
  display: none;  
}
[name="tab-group-1"]:checked + .tab-label {
  background: white;
  border-bottom: 1px solid white;
}
#tab-1 ~ #tab-content-1, #tab-2 ~ #tab-content-2, #tab-3 ~ #tab-content-3 {
  display:none;
}
#tab-1:checked ~ #tab-content-1, #tab-2:checked ~ #tab-content-2, #tab-3:checked ~ #tab-content-3 {
  display:block;
  align-self:bottom;
  border:1px solid;
  margin-top:-1px;    
}

<div class="tab-container">
    
       <input type="radio" id="tab-1" name="tab-group-1" checked><!--newline
       --><label class="tab-label" for="tab-1">Tab One</label><!--newline
       --><input type="radio" id="tab-2" name="tab-group-1"><!--newline
       --><label class="tab-label" for="tab-2">Tab Two</label><!--newline
       --><input type="radio" id="tab-3" name="tab-group-1"><!--newline
       --><label class="tab-label" for="tab-3">Tab Three</label><!--newline
       -->
       <div class="content" id="tab-content-1">
           stuff 1
       </div> 
       <div class="content" id="tab-content-2">
           stuff 2
       </div>
       <div class="content" id="tab-content-3">
           stuff 3
       </div> 
   
    
</div>
Stuff at the end is not covered up...

最终，如果能够仅使用 HTML 和 CSS（无 JS）实现像这样的响应式选项卡式容器，那就太好了，如果能够使用 CSS 来关闭单选按钮，那就太好了： #tab-1:checked:focus{checked:false;} 但就目前而言，我认为必须使用一些 JS 来在单选按钮从选中状态切换时将其关闭。

感谢您的帮助。

Answer 1

这是我自己的问题的解决方案：

/*======== Toggle Off Selected Tab ==========*/
var whichOneWasClickedBefore_suffix = "0";
// First, we must get the id of the initial checked radio, if one has been identified in the html... 
var radios = document.querySelectorAll('input[type="radio"]:checked');
var radios = document.getElementsByName('tab-group-1');
for ( var i = 0; i < radios.length; i++) {
    if(radios[i].checked) {
         whichOneWasClickedBefore_suffix = (i+1).toString();
        break;
    }
}
//// Next, we get which button was selected, compare it to the previous value, and uncheck it if they match.
$("[id^=thistab-]").click(function(event){
	var whichOneWasClickedAfter =  event.target.id;
  var whichOneWasClickedAfter_suffix = whichOneWasClickedAfter.match(/\d$/).shift();

  if (!whichOneWasClickedBefore_suffix.localeCompare(whichOneWasClickedAfter_suffix)){
	  whichOneWasClickedBefore_suffix = "0";
    $(this).prop('checked', false);  
  }else{
    whichOneWasClickedBefore_suffix = whichOneWasClickedAfter_suffix;
  };

});
/*======== END Toggle Off Selected Tab ==========*/

/* The attributes in .tab-container are likely non-essential*/
.tab-container{
  display:block; 
  margin:1rem;
}
.tab-label {
  display:inline-block;
  background: #eee; 
  border: 1px solid; 
}
[name="tab-group-1"] {
  display: none;  
}
[name="tab-group-1"]:checked + .tab-label {
  background: white;
  border-bottom: 1px solid white;
}
#thistab-1 ~ #tab-content-1, #thistab-2 ~ #tab-content-2, #thistab-3 ~ #tab-content-3 {
  display:none;
}
#thistab-1:checked ~ #tab-content-1, #thistab-2:checked ~ #tab-content-2, #thistab-3:checked ~ #tab-content-3 {
  display:block;
  align-self:bottom;
  border:1px solid;
  margin-top:-1px;    
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="tab-container">
    
       <input type="radio" id="thistab-1" name="tab-group-1" ><!--newline
       --><label class="tab-label" for="thistab-1">Tab One</label><!--newline
       --><input type="radio" id="thistab-2" name="tab-group-1" checked><!--newline
       --><label class="tab-label" for="thistab-2">Tab Two</label><!--newline
       --><input type="radio" id="thistab-3" name="tab-group-1"><!--newline
       --><label class="tab-label" for="thistab-3">Tab Three</label><!--newline
       -->
       <div class="content" id="tab-content-1">
           stuff 1
       </div> 
       <div class="content" id="tab-content-2">
           stuff 2
       </div>
       <div class="content" id="tab-content-3">
           stuff 3
       </div> 
   
    
</div>
Stuff at the end is not covered up...

注意：这里使用 JQuery；它也是一个完全响应的标签容器，我认为比 Kumar 之前发布的另一个要好得多。