javascript - 当所有输入共享同一个父 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 之前发布的另一个更好。