How to hide an element by value, if a radio button is checked?

user_15643839 0
Viewed 215

I've given 3 radio boxes as below,

    <input type="radio" class="minimal" name="statusFilter" value="1" autocomplete="off">
    <input type="radio" class="minimal" name="statusFilter" value="2" autocomplete="off">
    <input type="radio" class="minimal" name="statusFilter" value="3" autocomplete="off">

Here, I need to hide an element if the radio button with value 2 is checked. I've tried with the below code but 'hide is active for all the radio buttons.

    $('input[name="statusFilter"]').each(function() {
           if ($(this).val() == 2) {
           alert('test');
            $('#btn-create-proforma').hide();
       }
    });
html jquery javascript
2 Answers

You should listen to event onChange instead

Besides, you can use toggle to trigger show/hide to enhance the logic like this.

$('input[name="statusFilter"]').on("change", function() {
   const isEqualTo_2 = $(this).val() != 2;
   $('#btn-create-proforma').toggle(isEqualTo_2);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="radio" class="minimal" name="statusFilter" value="1" autocomplete="off">
<input type="radio" class="minimal" name="statusFilter" value="2" autocomplete="off">
<input type="radio" class="minimal" name="statusFilter" value="3" autocomplete="off">

<button id="btn-create-proforma">btn-create-proforma</button>

Explain:

  • When you listen to onChange event. Whenever you click the radio button, the callback function will be affected. Now you can check the value to display/hide button as you wish.

  • toggle internally works like, if a condition is true, then element.show() if it's false, element.hide().

user_90719430 
$('body').on('change', 'input[name="statusFilter"]', function(){
    var dis = $(this),
        showHide = dis.val() != 2;

    $('#btn-create-proforma').toggle(showHide);
});
user_139218580
Related