分别有两个单选按钮。有不同的名称值。我想在两个都是 "选中 "的情况下,给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>
只要添加第二个 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>
只要检查它们是否都被选中。
$(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")
}
});
});
你只检查第一个单选输入是否被点击(选中),这就是为什么当你点击第一个单选输入时,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>
你必须检查所有的单选按钮是否被选中,根据这个检查你可以切换块的可见性。
我给你要检查的单选按钮添加了一个类。只有当所有单选按钮的长度等于选中的部分时,我才会显示出计算总数的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>
你需要倾听两个无线电按钮的声音,每次都要检查这两个按钮。
$(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>