How to show/hide columns based on value of SharePoint radio button

by
Check SharePoint Developer Training Course [$66 OFF] || InfoPath Alternatives -> Try Now

This SharePoint tutorial, we will discuss how to Show/hide list column based on radio button selection using jQuery in SharePoint Online/2013/2016/2019.

Here I have a Custom list which has a radio button Gender which has Options Male and Female. Once the user chooses Male, One textbox (Multiline) will appear and if the user chooses Female then another textbox (Single line textbox) will appear.

We will see how we can achieve this using jQuery in SharePoint Online or in SharePoint 2013/2016/2019.

This will work in classic SharePoint list forms and will not work in modern SharePoint list forms.

SharePoint show/hide list column based on radio button selection

Step 1: Login to your site and create a out of box list as per below list.

sharepoint show/hide list column based on radio button selection
sharepoint show/hide list column based on radio button selection

Step 2 : Here I am using below code to hide /show text box based on radio button value.

<script src="//code.jquery.com/jquery-3.2.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
    $("nobr:contains('If Male')").closest('tr').hide();
    $("nobr:contains('If Female')").closest('tr').hide();
    $("span[title='Male']>input").change(function(){
        if($(this).is(":checked")){
            $("nobr:contains('If Male')").closest('tr').hide();
            $("nobr:contains('If Female')").closest('tr').hide();
        }    
    });
    $("span[title='Female']>input").change(function(){
        if($(this).is(":checked")){
            $("nobr:contains('If Male')").closest('tr').show();
            $("nobr:contains('If Female')").closest('tr').show();
        }else{
            $("nobr:contains('If Male')").closest('tr').hide();
            $("nobr:contains(' If Female')").closest('tr').hide();
        } 
    });
});
</script>

Step 3: Next edit your newForm.aspx and add a script Editor web part. Next, add the above code inside a script editor Web part. Once you added your code, next check the output by clicking in the radio button.

Show/hide list column based on radio button selection using jQuery in SharePoint Online/2013/2016
Show/hide list column based on radio button selection using jQuery in SharePoint Online/2013/2016

Here the functionality is like, If you click on male then both text box will get hide and if click on Female then you can able to see both text box.

You may like following SharePoint jQuery tutorials:

This is all about hide and show Out of box field based on JavaScript and jQuery.

Donwload Hub site pdf

Download SharePoint Online Tutorial PDF FREE!

Get update on Webinars, video tutorials, training courses etc.

  • Help on this pls

    I am new at coding in SharePoint. I have created a form which has multiple radio buttons. I want to hide or show text box based on radio button selection.

    1) Field Name: Is this an urgent request
    2) Radio button Option: Yes/No
    3) Field Name: Justification for urgency

    If the user selects Yes, I want the field 3) to be shown else hidden. I have added the below code (your code) in script editor and is working perfect.

    Now the question is, I have another field with same Yes/No option and how to expand the code for this:

    4) Field Name: Is this critical client
    5) Radio button Option: Yes/No
    6) Field Name: Brief description of client

    If the user selects Yes, I want the field 6) to be shown else hidden.

    Code that is working perfect for 1) to 3)

    $(function(){
    $(“span[title=’Yes’]>input”).change(function(){
    if($(this).is(“:checked”)){
    $(“nobr:contains(‘Justification for urgency’)”).closest(‘tr’).show();

    }
    });
    $(“span[title=’No’]>input”).change(function(){
    if($(this).is(“:checked”)){
    $(“nobr:contains(‘Justification for urgency’)”).closest(‘tr’).hide();

    }else{
    $(“nobr:contains(‘Justification for urgency’)”).closest(‘tr’).hide();

    }
    });
    });

    Also, is there a way if we make the hidden text box as mandatory, and while hiding, can it add a text as “NA” and hide.

    Any help would be great as I am new to coding.

    Thanks!

    Reply
    • >