Filter Radio Buttons or Checkboxes based on selection in another field

Change log:

06.10.2010 Fixed a bug with unchecking hidden options when using a multi choice checkbox type column as “consumer” column (line 84 in the code). Thanks to Mike for finding the bug.

31.08.2010 Modified the code to hide the “consumer field” entirely if no items is visible.

16.07.2010 Updated the code to support checkboxes (allow multiple selections) in both “trigger” and “consumer” columns. I have also changed the logic from using the index of the option to use the actual text value.

15.03.2010 small update to the code to handle blank “triggervalue”. Thanks to Larry.

I got this request from Elstone:

Hello

I have two choice fields, 1 drop down and another is multiple radio buttons (6 values/radio button). This I want to implement on newform/editform

In dropdown I have 3 values i.e. Yes/No/Not Sure (selected by default).

I want to show/hide some of the radio buttons out of 6 radio buttons depending on condiion.

Let say
if user select “Yes”, then show radiobutton1 and radiobutton 3
If user select “No” , then show radiobutton2 and radiobutton 5
If user select “Not Sure” then show all the radio buttons

How can I do this?

IMG

IMG

This script will work for single value <select>, Radio Buttons and Checkboxes. The script will uncheck all hidden options, so if you flip the selection from “Yes” to “No” any selections made under “Yes” will be cleared.

As always we start like this:
Create a document library to hold your scripts (or a folder on the root created in SharePoint Designer). In this example i have made a document library with a relative URL of “/test/English/Javascript” (a sub site named “test” with a sub site named “English” with a document library named “Javascript”):
IMG
Note: picture refers to jquery-1.3.2.min.js, but code uses jquery-1.4.2.min.js.

The jQuery-library is found here. The sourcecode refers to jquery-1.4.2.min. If you download another version, be sure to update the script reference in the sourcecode.

Add this code to a CEWP below the list form in NewForm and EditForm:

&lt;script type=&quot;text/javascript&quot; src=&quot;../../Javascript/jquery-1.4.2.min.js&quot;&gt;&lt;/script&gt;
&lt;script type=&quot;text/javascript&quot;&gt;
// Make object of all TR
fields = init_fields_v2();

// Call function with FieldInternalName of triggerfield and targetfield
init_hideRadiobuttons('MyTriggerColumn','MyRadioButton');

function init_hideRadiobuttons(triggerColumnFIN,radioButtonFIN){
var type = 'single';
if($(fields[triggerColumnFIN]).find('input').length&gt;0)type = 'multi';
	var thisVal = [];
	switch(type){
	case 'single':
		// Onload
		thisVal.push($(fields[triggerColumnFIN]).find('option:selected').text());
		hideRadiobuttons(radioButtonFIN,thisVal);
		// Onchange
		$(fields[triggerColumnFIN]).find('select').change(function(){
		thisVal = [];
			thisVal.push($(this).find('option:selected').text());
			hideRadiobuttons(radioButtonFIN,thisVal);
		});
	break;
	case 'multi':	
		// Onload
		$(fields[triggerColumnFIN]).find('input').each(function(){
			if($(this).attr('checked')){
				thisVal.push($(this).next().text());
			}
		});
		hideRadiobuttons(radioButtonFIN,thisVal);			

		// Onclick
		$(fields[triggerColumnFIN]).find('input').click(function(){
		thisVal = [];
			$(fields[triggerColumnFIN]).find('input').each(function(){
				if($(this).attr('checked')){
					thisVal.push($(this).next().text());
				}
			});
			hideRadiobuttons(radioButtonFIN,thisVal);			
		});
		break;
	}
}

function hideRadiobuttons(FieldInternalName,arrOfValues){
var showArr = [];
	$.each(arrOfValues,function(i,val){
		switch(val){
			case 'Yes':
				showArr.push('Selected Yes - option 1',
							 'Selected Yes - option 2',
							 'Selected Yes - option 3');
			break;
			case 'No':
				showArr.push('Selected No - option 1',
							 'Selected No - option 2',
							 'Selected No - option 3');
			break;
			case 'Not Sure':
				showArr.push('Selected Yes - option 1',
							 'Selected Yes - option 2',
							 'Selected Yes - option 3',
							 'Selected No - option 1',
							 'Selected No - option 2',
							 'Selected No - option 3');
			break
		}
	});
	if(showArr.length==0){
		// Hide row
		$(fields[FieldInternalName]).hide();
	}else{
		// Unhide row
		$(fields[FieldInternalName]).show();
		// Show options
		$(fields[FieldInternalName]).find('label').each(function(){
			var thisVal = $(this).text();
			if($.inArray(thisVal,showArr)&gt;-1){
				$(this).parents('tr:first').show();
			}else{
				$(this).prev().attr('checked',false)
				$(this).parents('tr:first').hide();			
			}
		});
	}
}

/*
  LastMod: 07.05.2010
*/
function init_fields_v2(){
	var res = {};
	$(&quot;td.ms-formbody&quot;).each(function(){
	var myMatch = $(this).html().match(/FieldName=&quot;(.+)&quot;s+FieldInternalName=&quot;(.+)&quot;s+FieldType=&quot;(.+)&quot;s+/);	
		if(myMatch!=null){
			// Display name
			var disp = myMatch[1];
			// FieldInternalName
			var fin = myMatch[2];
			// FieldType
			var type = myMatch[3];
			if(type=='SPFieldNote'){
				if($(this).find('script').length&gt;0){
					type=type+&quot;_HTML&quot;;
				}
			}
			if(type=='SPFieldLookup'){
				if($(this).find('input').length&gt;0){
					type=type+&quot;_Input&quot;;
				}
			}
			// Build object
			res[fin] = this.parentNode;
			res[fin].FieldDispName = disp;
			res[fin].FieldType = type;
		}		
	});
	return res;
}
&lt;/script&gt;

You must update the “cases” in the function “hideRadiobuttons” to match your setup.

Read here how to add a CEWP to the NewForm, DispForm or EditForm, and how to find the FieldInternalName of your columns.

Regards
Alexander

27 Comments on “Filter Radio Buttons or Checkboxes based on selection in another field”

  3. Alexander,

    Hope you are doing good – it’s been a while. I’ve tried every way to make this work and I can’t get the “MyRadioButton” choices to show up. They are invisible and that does not change whether I select something in the trigger or not. I don’t know if it matters but I am wanting both the trigger and the radio button to be checkboxes allowing multiple values. I’ve tried it exactly like the example and it won’t work for me. Thanks a ton for your help in advance!

    <script type="text/javascript" src="javascript/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
// Make object of all TR
fields = init_fields();

// Call function with FieldInternalName of triggerfield and targetfield
init_hideRadiobuttons('Choices','Answers');

function init_hideRadiobuttons(Choices, Answers){
// Onload
	var thisVal = $(fields[Choices]).find('option:selected').text();
	hideRadiobuttons(Answers,thisVal);

// Onclick
	$(fields[Choices]).find('select').change(function(){
		var thisVal = $(this).find('option:selected').text();
		hideRadiobuttons(Answers,thisVal);
	});
}

function hideRadiobuttons(FieldInternalName,val){
var showArr = [];
	switch(val){
	case 'Yes':
		showArr = [4,5]; // Index of the choices to show
	break;
	case 'No':
		showArr = [6]; // Index of the choices to show
	break;
	case 'Not Sure':
		showArr = [4,5,6]; // Index of the choices to show
	break
	}
	$(fields[FieldInternalName]).find('input').each(function(i){
		if($.inArray(i,showArr)>-1){
			$(this).parents('tr:first').show();
		}else{
			$(this).attr('checked',false)
			$(this).parents('tr:first').hide();
		}
	});
}

function init_fields(){
	var res = {};
	$("td.ms-formbody").each(function(){
	var myMatch = $(this).html().match(/FieldName="(.+)"s+FieldInternalName="(.+)"s+FieldType="(.+)"s+/);
		if(myMatch!=null){
			// Display name
			var disp = myMatch[1];
			// FieldInternalName
			var fin = myMatch[2];
			// FieldType
			var type = myMatch[3];
			// Build object
			res[fin] = this.parentNode;
			res[fin].FieldDispName = disp;
			res[fin].FieldType = type;
		}
	});
	return res;
}
</script>

  4. Alright I figured out that I need to put the “index” of each answer in not the actual answer. That should be interesting with all of the choices I will have. However, I did find that trigger field will not accept multiple selection checkboxes. Can you alter the code to allow this? Thanks!

  5. Hi Alexander,

    is it possible to hide the “consumer” field completely if the trigger column is set to a “non trigger” value? Right now only the options from the consumer column are hidden, leaving the Displayname and the description visible.

    Chris

  6. Hi Alex
    Great work! this works fine with multiple checkboxes in both “trigger” and “customer” columns, I have only one problem, the “consumer” checkboxes reamin checked after they are hidden.

    I can see the code is there in line 84 to uncheck them just before hide, but for some reason it doesn’t works for me.

    Thanks in advance for your help
    Mike

  7. No, this happend in all cases, I mean new and old items, old items previously checked or not. On all cases the code in line 84 should uncheck any hidden checkbox, right?

  8. Hi Alex,
    Using your methods of CEWP and javscript, I am trying to do something similar, but instead of filtering I am trying to set a Date.
    Any suggestions would be great.

    _spBodyOnLoadFunctionNames.push(“modifyflds”);

    function modifyflds()
    {
    $(“select[title^=Status]”).bind(“change”,statusChange);

    }

    function statusChange()
    {
    var Selected =$(“select[title^=Status]”).val() ;
    if(Selected==”Completed”)
    $.spff({field:’Date’,value:'[Today]’,lock:true});

    }

    1. Hi,
      Using the function “init_fields_v2” from the above code – this is how you set a date column with FieldInternalName of “MyDateCol”:

      $(fields['MyDateCol']).find('input:first').val('10/30/2010');

      Alexander

  9. i have a set of radiobutonns,which has sub radiobuttons.
    my problem is
    onpage load the main radiobuttons should be shown and on clicking on each main radiobuttons the sub radiobuttons shuld be shown.How can we do this.

  11. Thanks Alex.

    Got it all working, just have 1 issue left though.

    I had this

    function hideRadiobuttons(FieldInternalName,arrOfValues){
    var showArr = [];
    $.each(arrOfValues,function(i,val){
    switch(val){
    case ‘Delivery’:
    showArr.push(‘Central’,
    ‘East’,
    ‘West’,
    ‘South West’,
    ‘South East’,
    ‘North’);
    break;
    case ‘Processing’:
    showArr.push(‘Mount Pleasant Mail Centre’,
    ‘HWDC’,
    ‘Romford’,
    ‘Jubilee’,
    ‘Greenford’,
    ‘Croydon’);
    break;
    case ‘MPU’:
    showArr.push(‘Central’,
    ‘East’,
    ‘West’,
    ‘South West’,
    ‘South East’,
    ‘North’);
    break
    }
    });

    Now I have changed it to 4 options, however it will not pull the “Collections” through.

    function hideRadiobuttons(FieldInternalName,arrOfValues){
    var showArr = [];
    $.each(arrOfValues,function(i,val){
    switch(val){
    case ‘Delivery’:
    showArr.push(‘Central’,
    ‘East’,
    ‘West’,
    ‘South West’,
    ‘South East’,
    ‘North’);
    break;
    case ‘Collections’:
    showArr.push(‘Central’,
    ‘East’,
    ‘West’,
    ‘South West’,
    ‘South East’,
    ‘North’);
    break;
    case ‘Processing’:
    showArr.push(‘Mount Pleasant Mail Centre’,
    ‘HWDC’,
    ‘Romford’,
    ‘Jubilee’,
    ‘Greenford’,
    ‘Croydon’);
    break;
    case ‘MPU’:
    showArr.push(‘Central’,
    ‘East’,
    ‘West’,
    ‘South West’,
    ‘South East’,
    ‘North’);
    break
    }
    });

  14. Alex: Please advise, we are using SP 2010 finally, and I wanted to set this form up an exercise in jquery. I was able to get the jquery check to work (both pop ups flashed, so I know ver 1.4.2 is active) Can you answer the following:

    1: Should this work in SP 2010 — part my our company still uses SP 2007, and some are 2010.
    2: In lines 72-85, do I change FIN to match the field for my radio buttons, or keep this as is? I made similar changes in the lines 7,9,11, and 16
    3: Does the reply Steve E left apply to your post? I coded mine like yours, but am now wondering if the approach using the index value is correct

    Thanks for the follow up, i know this is somewhat dated..but its been very helpful thus far.

    1. Sorry for the late reply,
      I have not tested it in SP2010, but i guess it should work.

      You must update the fieldinternalnames in line 7, and the cases in “hideRadiobuttons”.

      I do not think there are more to change.

      Steves comment is not relevant as the code example has been updated.

      Alexander

  15. Hi Alexander,
    I was so happy to find this post because it’s exactly something I need to use, but I can’t seem to get it to work. I tried both adding this in a CEWP and putting it in the Custom JS section. I don’t see any errors in my console, but it doesn’t seem to be working. I’m using SharePoint 2013. Does this work for that version?

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.