How to show/hide columns based on value of SharePoint choice check box

Question

I am working with SharePoint online and in one of the lists, I am using a choice check box column called 'Vehicle Type' with following choices: Personal Vehicle, Company Vehicle.

I am looking to do a simple thing, when Personal vehicle is checked, then I would like to hide two currency columns: Car Rental, Fuel and if Company Vehicle is checked I want to show the above two columns. Can someone help me with the JS solution. Thanks in advance.

P.S: it should account for the change event.

<script src="//code.jquery.com/jquery-3.2.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function()

    $("input[title='Vehicle Driven']").change(function(){
        if($(this).is(":checked")=="Personal Vehicle"){
            $("nobr:contains('Fuel')").closest('tr').hide();
        }else{
            $("nobr:contains('Fuel')").closest('tr').show();
        }
    });

});
</script>

Answer 1

I create a test custom list and add new column 'Vehicle Type'(choice Checkbox field type) with following choices: Personal Vehicle, Company Vehicle. And two currency columns: Car Rental, Fuel.

Then add the following code into script editor web part in newform.aspx page.

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

Answer 2

Instead, input, try to use select as the following

$("select[title='Vehicle Driven']").change(function()
{
  if ($("select[title='Vehicle Driven']").val() != "Personal Vehicle")
  {
   $("nobr:contains('Fuel')").closest('tr').hide();
  }
  else
  {
   $("nobr:contains('Fuel')").closest('tr').show(); 
  }
// your code
}

Note: In SharePoint Online, make sure that you have enabled the custom script

For more details check

• Show / Hide fields based on choice field selection in SharePoint using Jquery

• Show / Hide fields based on a drop-down field using SPUtility.js

Answer 3

If you want to get a field value with jQuery, you could do something like this (sample is for a text input field)

$("input[title='title_of_the_field']").val()

And hiding an input field would be something like:

$("input[title='title_of_the_field']").hide()

And to check if a checkbox is checked, you could use the following code:

if ($("input[title='title_of_the_field']").is(":checked"))
{
  // it is checked
}