如果选中了两个单选按钮，则将css添加到div中

Question

分别有两个单选按钮。具有不同的名称值。当两者都"选中"时，我试图向div元素添加一个css。

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

Answer 1

只需像对input[name="nameone"]:那样添加第二个if条件

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>

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

Answer 3

您只是在检查第一个单选输入是否被点击(选中(，这就是为什么您在点击第一个单选时会显示div。你应该听/检查两者。如果两者都单击(选中(。那就是你想做某事的时候。您可以使用&amp；完成任务

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>

Answer 4

您必须检查是否选中了所有单选按钮，并在此检查的基础上切换块的可见性。

我为您要检查的单选按钮添加了一个类。只有当所有单选按钮的长度都等于选中的值时，我才会显示计算总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>

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>