Question

Forms - Display Row in Table based on Checkbox tick

Forms

Updated August 16, 2018

asked on August 16, 2018 • Show version history

Hi There,

I currently have a checkbox variable with 8 different options or so.

I'm having some trouble having a field in a specific row appear when one of the tickboxes in the checkbox is ticked.

First of all I'm hiding my input field ID :

#Field14\(1\) { display:none; }

I assumed the below would work : (#Field26-0 is the ID of my tickbox)

 $("#Field26-0").on("click",function() {
    $("#Field14(1)").css({display: "block"});
  });

but I'm getting an error relating to the syntax of Field14(1). I have tried it in the same format as the CSS with the \ \ but no such luck. Any ideas? I've tried .toggle as well so it will show / hide on the tickbox click but still no luck

0 0

Answer

SELECTED ANSWER

replied on August 16, 2018

I was probably trying to be too clever (what I got caught out with was the double \\ \\ required rather than CSS that requires just \ \ between characters), this works;

$(document).ready(function(){
 
   $("#Field14\\(1\\)").hide();
  var target = $("#Field14\\(1\\)");  
 
  
  
  $('#Field26-0').on("click",function() {
    
    if ($(target).is(":hidden")){
         $(target).css("display", "block");
    } else {
      $(target).css("display", "none");
    }
   });

});

0 0

Replies

replied on August 16, 2018

Hello Alex,

Please try the following script:

$(document).ready(function(){
  
//  $( ".chk input[type=checkbox]" ).on( "click",function(){
  $('.tbl tbody').on('click','.chk input[type=checkbox]',function(){
  
  var par ;
    if($(this).is(':checked'))
  {
    par = $(this).closest('tr');
       if($(this).val()=='col_1')
    {
      
   // alert(par.find('.col1 input').val());
      par.find('.col1 input').attr('style','display:none !important;');
      
    }
    else if ($(this).val()=='col_2'){
     
   // alert(par.find('.col1 input').val());
      par.find('.col2 input').attr('style','display:none !important;');
     
    }
  }
else
{
  par = $(this).closest('tr');
       if($(this).val()=='col_1')
    {
      
   // alert(par.find('.col1 input').val());
      par.find('.col1 input').attr('style','display:block !important;');
      
    }
    else if ($(this).val()=='col_2'){
     
   // alert(par.find('.col1 input').val());
      par.find('.col2 input').attr('style','display:block !important;');
     
    }
  
}

});
});

.tbl is the class of the table

.col1 is the class of column 1

.col2 is the class of column 2

.chk is the class of the checkbox

col_1 is the value of column 1

col_2 is the value of column 2

hope it helps you.

Maher,

0 0

replied on August 16, 2018

Hi,

Cheers. This looks like it'd work with 1-2 rows but the issue is I have 7 rows all the way down. I thought simply doing a simple toggle on tickbox check for the 7 different checkboxes

0 0

replied on August 16, 2018

Hello alex,

this will work for all the rows, you will only put the function once, and according to the classes it will work fine.

0 0

replied on August 16, 2018

Will this only work if the checkbox is a part of the table? the checkbox is a seperate variable due to the different paths it takes in a gateway. I'll give it a go, cheers!

0 0

You are not allowed to follow up in this post.

Question

Question

Forms - Display Row in Table based on Checkbox tick

Answer

Replies

Sign in to reply to this post.