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

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.

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.

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:

• Create a Custom Calendar in SharePoint using Rest API and jQuery
• Display SharePoint list data in jQuery data table using Rest API
• Add heading in the default newForm.aspx in SharePoint list using JavaScript and CSS
• Create an organization chart from a list in SharePoint Online/2013/2016 using JavaScript
• Change column ordering in list forms in SharePoint Online/2013/2016
• Different ways to hide/disable quick edit in a list in SharePoint 2013/2016/Online
• SharePoint Rest API Crud Operations
• Create SharePoint Quote of the day web part using Rest API and Bootstrap
• Add Google ReCaptcha in SharePoint Online or SharePoint 2013/2016/2019 (Step by Step tutorial)
• Get Current User Details Using JavaScript Object Model (jsom) and jQuery in SharePoint 2013/2016/Online
• Retrieve and Display TASK status using REST API in SharePoint

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