Блог

Главная - Вопросы по программированию - jQuery toggle () для переключателя выбирает несколько одновременно, должен работать как простой переключатель

jQuery toggle () для переключателя выбирает несколько одновременно, должен работать как простой переключатель

#javascript #html #jquery #css #bootstrap-4

#javascript #HTML #jquery #css #bootstrap-4

Вопрос:

Я создал две переключающие кнопки, и для обеих переключателей я использовал для создания <i> значка шрифта. Поскольку я создал это ранее в качестве флажка, и он работал правильно, я использовал тот же код для создания переключателей. Исправлена позиция; это работает, если я выбираю флажок. Для этих переключателей я использовал toggle() функцию в jQuery. Но когда я использую переключатели, я увидел, что не могу делать один выбор за раз.

 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>

Комментарии:

1. надеюсь, кто-нибудь поймет это требование, я объясню еще раз. переключатель работает нормально, но возникает проблема, если я выбираю один переключатель и после выбора одного переключаюсь на второй переключатель. Тогда я увижу, что оба переключателя были проверены, хотя при нажатии нужно выбрать только одну переключатель. кнопка.

2. Я понимаю объяснение, но предназначено ли это строго для ручной обработки радио? … если это так, то это, по-видимому, трудный путь для увеличения накладных расходов. Вы видели пример начальной загрузки радио ? (прокрутите немного вниз до примера радио)

Ответ №1:

Вы можете использовать .find() .not() методы и для достижения того же. Сначала вы можете получить ближайший div, который содержит оба ваших переключателя, затем использовать .not() exclude 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>