It's not the same without you

Join the community to find out what other Atlassian users are discussing, debating and creating.

Atlassian Community Hero Image Collage

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

Dan Flint Nov 28, 2013

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
Answer accepted
Rambanam Prasad Dec 01, 2013

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

Dan Flint Dec 01, 2013

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

Rambanam Prasad Dec 01, 2013

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

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

0 votes
Rambanam Prasad Nov 29, 2013

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>

Dan Flint Dec 01, 2013

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

Rambanam Prasad Dec 01, 2013

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

Dan Flint Dec 01, 2013

Rambanam - I have sorted it by changing

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

0 votes
Cristian Mauro Dec 05, 2013

hello rambanam

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

Can you help me?

thanks!!! :)

Rambanam Prasad Dec 05, 2013

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

0 votes
Cristian Mauro Dec 05, 2013

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

Rambanam Prasad Dec 08, 2013

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

0 votes
Cristian Mauro Dec 05, 2013

I've also tried with

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

and no results

0 votes
Rambanam Prasad Dec 08, 2013

@Cristian, try with the following event

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

Cristian Mauro Dec 08, 2013

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

Cristian Mauro Dec 08, 2013
<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

Dan Flint Dec 08, 2013
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>
Rambanam Prasad Dec 08, 2013

@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

Cristian Mauro Dec 08, 2013

@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

Rambanam Prasad Dec 08, 2013

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

0 votes
Cristian Mauro Dec 08, 2013

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

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

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

0 votes
Cristian Mauro Dec 08, 2013

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

Rambanam Prasad Dec 08, 2013

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

Rambanam Prasad Dec 08, 2013

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>

Cristian Mauro Dec 08, 2013

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

Cristian Mauro Dec 08, 2013

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 :(

Rambanam Prasad Dec 08, 2013

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

Cristian Mauro Dec 08, 2013

@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

Cristian Mauro Dec 09, 2013

look this:

create issue

0 votes
Cristian Mauro Dec 08, 2013

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
This widget could not be displayed.
This widget could not be displayed.
Community showcase
Posted in Off-topic

Disney Live Action Reboots: Are you for or against?

Happy Friday Everyone! Today marks the international release of Disney's live action version of the animated classic Aladdin. I know that this movie was met with some controversy of over cast...

214 views 22 10
Join discussion

Community Events

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

Find an event

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

Unfortunately there are no Community Events near you at the moment.

Host an event

You're one step closer to meeting fellow Atlassian users at your local event. Learn more about Community Events

Events near you