如果两个单选按钮被选中，将CSS添加到div。

Question

有两个单选按钮，分别拥有不同的name值。我想在两个按钮都被选中时添加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>

- Sercan Aslan

Answer 1

只需添加第二个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>

- johannchopin

Answer 2

仅检查两者是否都已选中：

$(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")
        }
    });
});

- Philip F.

Answer 3

你只检查第一个单选框是否被选中，这就是为什么当你点击第一个单选按钮时会显示该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>

- Joshua Folorunsho

---

看起来非常非常接近我的答案:/ - johannchopin

Answer 4

您需要检查所有单选按钮是否已选中，并根据此检查切换块的可见性。

我为要检查的单选按钮添加了一个类。只有当所有单选按钮的长度等于已选中的单选按钮时，我才会显示calculate-total div。

$(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>

- cloned

Answer 5

你需要同时监听两个单选按钮，并且每次都要检查它们：

$(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>

- Majed Badawi