Hide show check box and other custom fields dependant on check box values

I am trying to hide multiple custom fields dependant on the options selected in a check box.

Check Box - Option 1 being selected should show custom field 1

Check Box - Option 2 being selected should show custom field 2

Check Box - Option 2 being selected should show custom field 3

Also any combination of these should be allowed...

I have been playing with the code found at the answer below that works for a single field and for showing textfields I need to hide and show other check boxes also.

https://answers.atlassian.com/questions/158035/need-to-hide-show-a-textfield-based-on-the-value-of-the-check-box-using-javascript

Can anyone provide some direction on how to acheive this? - It would be greatly appreciated.

9 answers

1 accepted

0 votes
Accepted answer

if you whant to hide or show check box field then replace with following code

to show checkbox

$("#customfield_12310-1").closest('fieldset.group').show();

to hide check box

$("#customfield_12310-1").closest('fieldset.group').hide();

don't forgot to update custom field id's and check box option text

Hi rambanam - I take it this is to remove certain check box options, is there a way to hide the whole checkbox custom field?

I have tried

$("#customfield_10834").closest('fieldset.group').hide()

But this does not seem to work...

Cheers

Dan

you have to use as it is which i am specified in my second answer i.e

$("#customfield_10834-1").closest('fieldset.group').hide()

you can try with folloing code by changing cutomfield id's and check box options texts

<script type="text/javascript">  
jQuery(document).ready(function($) {
	JIRA.bind(JIRA.Events.NEW_CONTENT_ADDED, function (e,context) {
		showHideFieldFunction();
	});
		showHideFieldFunction();
	
function showHideFieldFunction(){
			showorhidefields(); 
	//	$("#customfield_12310-1,#customfield_12310-2,#customfield_12310-3").click(function() { //use this if following line not worked 
	$('input[type=checkbox]').live('click', function() {
			showorhidefields(); 
		});	
	
		
	}
function showorhidefields(){
	var checkedCheckboxes = $("input:checkbox[name=customfield_12310]:checked");		
			$("#customfield_10582").closest('div.field-group').hide(); //custom field 1
			$("#customfield_10890").closest('div.field-group').hide(); //custom field 2
			$("#customfield_10743").closest('div.field-group').hide(); //custom field 3
				
		checkedCheckboxes.each(function () {
				var selVal=$(this).text();
		
				if(selVal == 'option 1'){					
					$("#customfield_10582").closest('div.field-group').show();	
				}else if(selVal=='option 2'){					
					$("#customfield_10890").closest('div.field-group').show();
				}else if(selVal=='option 3'){					
					$("#customfield_10743").closest('div.field-group').show();
				}			
				
			});
		}	
		
	
	});
	
</script>

Hi - Thanks for the help, this works for singular selections, but if multiple combinations are made it doesn't seem to work.

i.e if option 1&3, 2&3, 1&2 and 1&2&3 are selected

Dan

it should work because i am using this code already and it is working as expected!!

Rambanam - I have sorted it by changing

varselVal=$(this).text(); - var selVal=$(this).next("label").text();

hello rambanam

I can't make it work the code in jira 6.1.2

Can you help me?

thanks!!! :)

can you give alerts and let me know what is not working so i can help you!!

Rambanam,

starting with the fields are not hidden with $('input[type=checkbox]').live('click', function() {

I place the code in the checkbox field

I've tried with $("#customfield_11019-1,#customfield_11019-2,#customfield_11019-3").click(function() {

I also have not positive results. Fields are hidden, but then never appear with a selection on checkbox, not shown anymore

Help me please, I searched many forums, no example helps to me

i have tested it on 6.1 and it is working fine, on which screen those fields are there?

if the fields are there on create screen then i suggest to load javascript as webresource module in a plugin, check this Q

https://answers.atlassian.com/questions/47843/strange-javascript-problem-in-create-screen

if not on create screen then add the javascript on last field in that form and try it

I've also tried with

var = $ (this) next ("label") text ().

and no results

@Cristian, try with the following event

$('input[type=checkbox]').live('change', function() {

I tried with the code you gave me, like this:

<script type="text/javascript">  

jQuery(document).ready(function($) {

    JIRA.bind(JIRA.Events.NEW_CONTENT_ADDED, function (e,context) {

        showHideFieldFunction();

    });

        showHideFieldFunction();



function showHideFieldFunction(){

            showorhidefields();

    $('input[type=checkbox]').live('change', function() {

    showorhidefields(); 

        });

    }

function showorhidefields(){

    var checkedCheckboxes = $("input:checkbox[name=customfield_11019]:checked");        

            $("#customfield_11031").closest('div.field-group').hide(); //custom field 1

            $("#customfield_11032").closest('div.field-group').hide(); //custom field 2

            $("#customfield_11033").closest('div.field-group').hide(); //custom field 3



        checkedCheckboxes.each(function () {

                var selVal=$(this).text(); 



                if(selVal == 'Lugar1'){

                    $("#customfield_11031").closest('div.field-group').show(); 

                }else if(selVal=='Lugar2'){

                    $("#customfield_11032").closest('div.field-group').show();

                }else if(selVal=='Lugar3'){

                    $("#customfield_11033").closest('div.field-group').show();

                } 

            });

        }   

    });

</script>

No works or the creating or editing screen.

I tried another script in javascript and works correctly

I'm writing something wrong in the JS?

Thanks Rambanam

<script type="text/javascript">
jQuery(document).ready(function($) {

    JIRA.bind(JIRA.Events.NEW_CONTENT_ADDED, function (e,context) {

        showHideFieldFunction();

    });

        showHideFieldFunction();



function showHideFieldFunction(){

            showorhidefields();

    $('input[type=checkbox]').live('change', function() {

    showorhidefields(); 

        });

    }

function showorhidefields(){

    var checkedCheckboxes = $("input:checkbox[name=customfield_11019]:checked");        

            $("#customfield_11031").closest('div.field-group').hide(); //custom field 1

            $("#customfield_11032").closest('div.field-group').hide(); //custom field 2

            $("#customfield_11033").closest('div.field-group').hide(); //custom field 3



        checkedCheckboxes.each(function () {

                var selVal=$(this).text(); 



                if(selVal == 'Lugar1'){

                    $("#customfield_11031").closest('div.field-group').show(); 

                }else if(selVal=='Lugar2'){

                    $("#customfield_11032").closest('div.field-group').show();

                }else if(selVal=='Lugar3'){

                    $("#customfield_11033").closest('div.field-group').show();

                } 

            });

        }   

    });

</script>

I tried with the code you gave me, like this:

No works or the creating or editing screen.

I tried another script in javascript and works correctly

I'm writing something wrong in the JS?

Thanks Rambanam

Try the following - Just make sure you include the correct options for customfield_1109-1....

<script type="text/javascript">
(function($) {   
    
    AJS.toInit(function(){
        //function  
    });
 
    JIRA.bind(JIRA.Events.NEW_CONTENT_ADDED, function (e,context) {
 
        showHideFieldFunction();
 
    });
 
        showHideFieldFunction();
 
 
 
function showHideFieldFunction(){
 
            showorhidefields();
 
    $("#customfield_11019-1,#customfield_11019-2,#customfield_11019-3").click(function() {
 
    showorhidefields(); 
 
        });
 
    }
 
function showorhidefields(){
 
    var checkedCheckboxes = $("input:checkbox[name=customfield_11019]:checked");        
 
            $("#customfield_11031").closest('div.field-group').hide(); //custom field 1
 
            $("#customfield_11032").closest('div.field-group').hide(); //custom field 2
 
            $("#customfield_11033").closest('div.field-group').hide(); //custom field 3
 
 
 
        checkedCheckboxes.each(function () {
 
                var selVal=$(this).text(); 
 
 
 
                if(selVal == 'Lugar1'){
 
                    $("#customfield_11031").closest('div.field-group').show(); 
 
                }else if(selVal=='Lugar2'){
 
                    $("#customfield_11032").closest('div.field-group').show();
 
                }else if(selVal=='Lugar3'){
 
                    $("#customfield_11033").closest('div.field-group').show();
 
                } 
 
            });
 
        }   
 
    });
 
</script>

@Cristian,

where you added the javascript?

i suggest to add it as a webresource module in a plugin, check this

https://answers.atlassian.com/questions/47843/strange-javascript-problem-in-create-screen

@rambanam I'm adding in the description of customfield check box.

I read the article. I am very new to jira and I don't understand many things. i'm sorry

ok, for testing purpose add the javascript in announcement banner

check this doc to know about how to set announcement banner

https://confluence.atlassian.com/display/JIRA/Configuring+an+Announcement+Banner

@Daflint thank you. but your code does not work for me

what is it? where it says "/ / function" should go?

AJS.toInit(function(){
        //function  
    });

@rambanam I have added the code in the announcement banner. nothing has appeared on the banner.

it does't show anything on announcement banner, just go to the dash board and refresh the browser and open the create issue page and check the functionality

remove the existing code and add the following code in announcement banner

<script type="text/javascript">
jQuery(document).ready(function($) {
 
    JIRA.bind(JIRA.Events.NEW_CONTENT_ADDED, function (e,context) {
 
        showHideFieldFunction();
 
    });
 
        showHideFieldFunction();
 
 
 
function showHideFieldFunction(){
 
            showorhidefields();
 
    $('input[type=checkbox]').live('change', function() {
 
    showorhidefields();
 
        });
 
    }
 
function showorhidefields(){
 
    var checkedCheckboxes = $("input:checkbox[name=customfield_11019]:checked");       
 
            $("#customfield_11031").closest('div.field-group').hide(); //custom field 1
 
            $("#customfield_11032").closest('div.field-group').hide(); //custom field 2
 
            $("#customfield_11033").closest('div.field-group').hide(); //custom field 3
 
 
 
        checkedCheckboxes.each(function () {
 
                var selVal=$(this).text();
 
 
 
                if(selVal == 'Lugar1'){
 
                    $("#customfield_11031").closest('div.field-group').show();
 
                }else if(selVal=='Lugar2'){
 
                    $("#customfield_11032").closest('div.field-group').show();
 
                }else if(selVal=='Lugar3'){
 
                    $("#customfield_11033").closest('div.field-group').show();
 
                }
 
            });
 
        }  
 
    });
 
</script>

I'm sorry, you want to load this code to the banner?

<web-resource key="test-js" name="javascript">
        <dependency>jira.webresources:global-static</dependency>
        <description>JavaScript</description>
        <resource name="test.js" type="download" location="templates/js/test.js" />
        <context>atl.general</context>
         <context>atl.admin</context>
    </web-resource>

this show me: jira.webresources:global-static JavaScript atl.general atl.admin

that is exactly the same code that I have in the description of checkbox customfield. when I put the banner nothing appears.

and create an issue the fields do not appear :(

remove the javascript from field description and add the above script in announcement banner only then refresh the create issue page and test and make sure that all the custom field id's and options names are correct

@rambanam the fields are hidden. but don't appear to check the checkbox

all fields are correct

checkbox is customfield_11019

option 1 in checkbox Lugar1

option 2 in checkbox Lugar2

option 3 in checkbox Lugar3


textbox 1 customfield_11031

textbox 2 customfield_11032

textbox 3 customfield_11033

that is exactly the same code that I have in the description of checkbox customfield. when I put the banner nothing appears.

and create an issue the fields do not appear :(

Suggest an answer

Log in or Sign up to answer
Community showcase
Published Wednesday in Jira

Make your Atlassian Cloud products more secure: our NEW admin security guide

Hey admins! I’m Dave, Principal Product Manager here at Atlassian working on our cloud platform and security products. Cloud security is a moving target. As you adopt more products, employees consta...

45 views 0 2
Read article

Atlassian User Groups

Connect with like-minded Atlassian users at free events near you!

Find a group

Connect with like-minded Atlassian users at free events near you!

Find my local user group

Unfortunately there are no AUG chapters near you at the moment.

Start an AUG

You're one step closer to meeting fellow Atlassian users at your local meet up. Learn more about AUGs

Groups near you