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

Question

There are two radio buttons separately. Have different name values. I'm trying to add a css to the div element when both are "checked".

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

Just check if both of them are checked:

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

Just add a second if condition like you do for the 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>

Answer 3

You are only checking if the first radio input is clicked (checked), that's why you the div is showing when you click on the first radio input. You should listen/check for both. If both are clicked (checked). Then that's when you want to do something. You can use the && to get the job done

 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

You have to check if all radio buttons are checked and based on this check you can toggle the visibility of the block.

I added a class to the radiobuttons you want to check. And only if the length of all radiobuttons is equal to the checked onces i show the 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>

Answer 5

You need to listen for both radio buttons and check for both each time:

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