单选按钮的 jQuery toggle() 一次选择多个，需要像简单的单选按钮一样工作答案

【问题标题】：jQuery toggle() for radio button selects multiple at a time, needs to work like simple radio button单选按钮的 jQuery toggle() 一次选择多个，需要像简单的单选按钮一样工作
【发布时间】：2021-01-01 13:51:15
【问题描述】：

我创建了两个单选按钮，对于这两个单选按钮，我用于创建<i> 字体图标。由于我之前已将其创建为复选框并且它工作正常，因此我使用相同的代码来创建单选按钮。固定位置；如果我通过复选框，它会起作用。对于这些单选按钮，我使用了 jQuery 中的 toggle() 函数。但是当我使用单选按钮时，我发现我不能一次选择一个。

function togperm()
{
    $("#perm").toggle();

}
function togchq()
{
    $("#chq").toggle();

}

.radiocirl {
    width: 20px;
    height: 20px;
    border: 1px solid #CCCCCC;
    border-radius: 50%;
}
.bluefont{ color:rgb(0,98,168) !important; }
.shcursor{cursor: pointer;}
.f10{font-size: 1.0em !important;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="col-md-12"> 
  <div class="col-12">
    <div class="row">
      <div class="col-1"> 
        <div class="radiocirl shcursor" onclick="togchq()">
          <i class="fa fa-circle f10 bluefont" id="chq" style="position: absolute; display: none; margin: 2px 0.4px;"></i>
        </div>
      </div>
      <div class="col-11">
        <div class="col-12"> Correspondence Address</div>
      </div>
    </div>
    <div class="row">
      <div class="col-1">
        <div class="radiocirl shcursor" onclick="togperm()">
          <i class="fa fa-circle f10 bluefont" id="perm" style="position: absolute; display: none;margin: 2px 0.4px;"></i>
        </div>
      </div>                            
      <div class="col-11">
        <div class="col-12">Add Address</div>
      </div>
    </div>
  </div>
</div>

【问题讨论】：

希望有人理解要求，我再次解释。单选按钮工作正常，但是如果我选择一个单选按钮并且在选择一个单选按钮后我会选择第二个单选按钮。然后我会看到两个单选按钮都被选中，尽管只有一个单选按钮需要在点击时被选中。
我理解解释，但这是否旨在严格地手动无线电处理？ ...如果是这样，这似乎是要处理更多开销的艰难方法。你见过bootstraps radio example吗？（稍微向下滚动到收音机示例）

标签： javascript html jquery css bootstrap-4

【解决方案1】：

您可以使用.find() 和.not() 方法来实现相同的目的。首先，您可以获得包含两个单选按钮的最接近的 div，然后使用 .not() 排除发生点击事件的 div，然后只需使用 hide() 隐藏其他 i 图标。

演示代码：

$(".radiocirl").on("click", function() {
  //get the `i` tag
  var selector = $(this).find(".bluefont")
  selector.toggle(); //toggle same
  //get closest div `outer` and find `i` tag not(the one which is inside the div which is clicked hide it)
  $(this).closest(".outer").find(".bluefont").not(selector).hide()

})

.radiocirl {
  width: 20px;
  height: 20px;
  border: 1px solid #CCCCCC;
  border-radius: 50%;
}

.bluefont {
  color: rgb(0, 98, 168) !important;
}

.shcursor {
  cursor: pointer;
}

.f10 {
  font-size: 1.0em !important;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<!--aded outer class-->
<div class="col-md-12 outer">
  <div class="col-12">
    <div class="row">
      <div class="col-1">
        <div class="radiocirl shcursor">
          <i class="fa fa-circle f10 bluefont" id="chq" style="position: absolute; display: none; margin: 2px 0.4px;"></i>
        </div>
      </div>
      <div class="col-11">
        <div class="col-12"> Correspondence Address</div>
      </div>
    </div>
    <div class="row">
      <div class="col-1">
        <div class="radiocirl shcursor">
          <i class="fa fa-circle f10 bluefont" id="perm" style="position: absolute; display: none;margin: 2px 0.4px;"></i>
        </div>
      </div>
      <div class="col-11">
        <div class="col-12">Add Address</div>
      </div>
    </div>
  </div>
</div>

【讨论】：