views:

89

answers:

1

Essentially what is going on is that I'm using a database to create radio buttons and text fields. Depending on which radio button is selected a different text field is shown. That's the easy part. The hard part is that all the names, classes, etc. are dynamic. I've managed to get the script to work correctly with one exception. It needs to cycle through and if something is selected leave it open. Right now it is set up to close everything once you select a different radio button. It only leaves the currently selected item open. That is fine except it is closing the Checkbox as well.

How do I make it cycle through and leave the checked boxes' textfields visible?

  $(document).ready(function(){


 var vals = $('clickme').val();

        $(".clickme").click(function(){
     var rels = '.'+$(this).attr('rel');
    if ($('input[rel='+rels+']:checked').val() == vals ) {
   $('.hideable,rel').css("display","none");
   $(rels).slideDown("fast"); //Slide Down Effect
     } else {
     $(rels).slideUp("fast"); //Slide Up Effect
     }
     $('.clickme input').each(function(){
       if(this.checked == true){
     var relreset = '.'+$(this).attr('rel');
     $(relreset).slideDown('fast');
    }
     });
  });
  var rels = '.'+$('clickme').attr('rel');
        var showTop = $.cookie('showTop');
});

The easy solution would be to loop through and create a separate function for each field but I'm trying to create something dynamic. Something that we can use on many pages using the same principle. The line $('.clickme input') is where I have attempted to remedy the problem.

I'd appreciate some help. Thank you.

A: 

For those of you who may use a similar feature, here is what I used. It is such because having the hidden field marked as hidden in css beforehand causes issues. So I assign the hidden when the page is loaded to avoid this.

$(document).ready(function(){
    $('.hideable').css('display','none');
    $('.clickme').each(function(){
                var relreset = '.'+$(this).attr('rel');
                if(this.checked == true){       
                    $(relreset).fadeIn('fast');
                }else if(this.selected == true){
                    $(relset).fadeIn('fast');
                }else{
                    $(relreset).fadeOut('fast');
                }
            });

    $(".clickme").click(function(){
        $('.clickme').each(function(){
            var relreset = '.'+$(this).attr('rel');
            if(this.checked == true){       
                $(relreset).fadeIn('fast');
            }else if(this.selected == true){
                $(relset).fadeIn('fast');
            }else{
                $(relreset).fadeOut('fast');
            }
        });
    });
});
Micharch54
And this should work with all radios and checkboxes and selects as long as you have the input have a class of clickme and a rel with a unique name. Just make sure the rel in the input is assigned as a class in the hidden element.
Micharch54