You are viewing limited content. For full access, please sign in.

Question

Question

Javascript to hide all unchecked checkbox items

Forms Version 10
Updated October 19, 2020
asked on October 16, 2020

Our Health & Safety team has a Worksite Inspection form where the first person does the inspection and checks off items (in a checkbox field) that were found deficient, and where the next steps of the process walk those people responsible for corrections through the process until all deficiencies are cleared up.

The checklist is huge and sometimes messy looking.  It would be much better if only those items that were checked off as deficient show up on the next stages of the process.  

Can I use JavaScript to make the checkbox field show only those items that have check marks in them?

0 0

Answer

SELECTED ANSWER
replied on October 16, 2020

Hi Connie,

 

Yes you can use javascript.

 

//The page has finished loading
$(document).ready(function () 
{
	//Do a loop (for each checkbox)
	$('input[type=checkbox]').each(function ()
		{
      		//Check if the box is checked
      		var x = $(this).is(':checked');
      
      		//Get the option name
      		var option = $(this).val();
      		      
           	//if checkbox is checked
      		if(x === true) 
            	{
               		//Do something if the box is checked
                  	alert(option+" is checked");
           		}
      		//if checkbox is NOT checked
      		else
              	{
               		//Do something if the box is not checked
                  	alert(option+" is not checked");
                  
                  	//Hide the choice
                  	$(this).parent().hide();
           		}
		});
})

 

1 0
replied on October 16, 2020

Thanks, Olivier!

So, I copied your JS exactly as is and saw the results of the alert option.  That's an interesting option, but not needed for this process so I cut pieces out until I got just want I needed.  Just wanted to have confirmation that it's okay to run it like this:

//The page has finished loading
$(document).ready(function () 
{
	//Do a loop (for each checkbox)
	$('input[type=checkbox]').each(function ()
		{
      		//Check if the box is checked
      		var x = $(this).is(':checked');
        		      
           	//if checkbox is NOT checked
      		if(x === false) 
            	{
                  	//Hide the choice
                  	$(this).parent().hide();
           		}

		});
})

It seemed to work in the first testing run!  Thanks!

2 0
replied on October 19, 2020

Looks good

1 0

Replies

You are not allowed to reply in this post.
You are not allowed to follow up in this post.

Sign in to reply to this post.

Details
Related Posts
Loading ...