Если два переключателя отмечены, добавьте css к div - PullRequest
Новая
       42

Если два переключателя отмечены, добавьте css к div

2 голосов
/ 04 мая 2020

Есть две радиокнопки отдельно. Иметь разные значения имени. Я пытаюсь добавить css к элементу div, когда оба "проверены". 

$(document).ready(function(){
    $('input[name="nameone"]').click(function(){
        if($(this).is(":checked")){
            $(".calculate-total").css("display","block")
        }
    });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label>
<input type="radio" name="nameone" /> Nameone radio
</label>
<br><br>
<label>
<input type="radio" name="nametwo" /> Namtwo radio
</label>

<div class="calculate-total" style="display:none;">If two radio checked both, this div will be visible.</div>

Ответы [ 5 ]

2 голосов
/ 04 мая 2020

Просто добавьте второе if условие, как вы делаете для input[name="nameone"]: 

function showDiv() {
  if ($('input[name="nameone"]').is(":checked") && $('input[name="nametwo"]').is(":checked")) {
    $(".calculate-total").css("display", "block")
  }
}

$(document).ready(function() {
  $('input[name="nameone"], input[name="nametwo"]').click(function() {
    showDiv();
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<label>
<input type="radio" name="nameone" /> Nameone radio
</label>
<br><br>
<label>
<input type="radio" name="nametwo" /> Namtwo radio
</label>

<div class="calculate-total" style="display:none;">If two radio checked both, this div will be visible.</div>
2 голосов
/ 04 мая 2020

Просто проверьте, если оба они проверены: 

$(document).ready(function(){
    $('input[name="nameone"], input[name="nametwo"]').click(function(){
        if($('input[name="nameone"]').is(":checked") && $('input[name="nametwo"]').is(":checked")){
            $(".calculate-total").css("display","block")
        }
    });
});
1 голос
/ 04 мая 2020

Вы только проверяете, нажата ли первая радиовход (проверена), поэтому ваш div показывает, когда вы нажимаете на первый радиовход. Вы должны слушать / проверять оба. Если оба щелкнули (проверено). Тогда вы хотите что-то сделать. Вы можете использовать &&, чтобы выполнить работу 

function showDiv() {
  if ($('input[name="nameone"]').is(":checked") && $('input[name="nametwo"]').is(":checked")) {
    $(".calculate-total").css("display", "block")
  }
}

$(document).ready(function() {
  $('input[name="nameone"], input[name="nametwo"]').click(function() {
    showDiv();
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<label>
<input type="radio" name="nameone" /> Nameone radio
</label>
<br><br>
<label>
<input type="radio" name="nametwo" /> Namtwo radio
</label>

<div class="calculate-total" style="display:none;">If two radio checked both, this div will be visible.</div>
0 голосов
/ 04 мая 2020

Вам необходимо прослушать обе радиокнопки и проверять обе кнопки каждый раз: 

$(document).ready(function(){
    $('input:radio').change(function(){
         if($('input[name="nameone"]').is(":checked") && $('input[name="nametwo"]').is(":checked")){
              $(".calculate-total").css("display","block")
         }
    });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label>
     <input type="radio" name="nameone" /> Nameone radio
</label>
<br><br>
<label>
      <input type="radio" name="nametwo" /> Namtwo radio
</label>
<div class="calculate-total" style="display:none;">If two radio checked both, this div will be visible.</div>
0 голосов
/ 04 мая 2020

Вы должны проверить, все ли переключатели отмечены, и на основе этой проверки вы можете переключать видимость блока.

Я добавил класс для радиокнопок, которые вы хотите проверить. И только если длина всех радиокнопок равна проверенным значениям, я показываю div-сумму Calculate-Total 

$(document).ready(function() {
  $('input[type="radio"]').on('change', function() {
    if ($('.check-it').filter(':checked').length === $('.check-it').length) {
      $(".calculate-total").css("display", "block")
    } else {
      $(".calculate-total").css("display", "none")
    }
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label>
<input type="radio" name="nameone" class="check-it" /> Nameone radio
</label>
<label>
<input type="radio" name="nameone" /> Nameone radio
</label>
<br><br>
<label>
<input type="radio" name="nametwo" class="check-it" /> Namtwo radio
</label>
<label>
<input type="radio" name="nametwo" /> Namtwo radio
</label>

<div class="calculate-total" style="display:none;">If two radio checked both, this div will be visible.</div>
...