Jquery动态单选按钮显示隐藏

时间:2010-08-27 18:09:14

标签: jquery coldfusion

基本上是发生了什么,我正在使用数据库来创建单选按钮和文本字段。根据选择的单选按钮,将显示不同的文本字段。这很容易。困难的部分是所有的名称,类等都是动态的。我设法让脚本正常工作,但有一个例外。它需要循环通过,如果选择了某些东西,请将其打开。现在,它设置为在您选择其他单选按钮后关闭所有内容。它只会打开当前选定的项目。这很好,除了它也关闭了Checkbox。

如何让它循环显示并使复选框的文本字段可见?

  $(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');
});

简单的解决方案是循环并为每个字段创建一个单独的函数,但我正在尝试创建动态的东西。我们可以在许多页面上使用相同原理的东西。行$('。clickme input')是我试图解决问题的地方。

我很感激一些帮助。谢谢。

1 个答案:

答案 0 :(得分:0)

对于那些可能使用类似功能的人来说,这就是我使用的内容。这是因为预先在css中标记为隐藏的隐藏字段会导致问题。所以我在加载页面时分配隐藏以避免这种情况。

$(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');
            }
        });
    });
});

从这里我们要做的是给复选框,收音机等,class =“clickme”。这是使该功能监听点击的原因。在收音机上,我们需要确保每个人都有班级。

从这里我们将rel =“someuniquename”添加到复选框,收音机等。这将传递我们要隐藏的元素的类。所以我们将通过课程将其与元素进行匹配。

所以例如(使用coldfusion,因此是#))。

将使用rel_ #minimum_qualifications_id #class传递affect元素。所以我们的元素看起来像这样:

请注意,那里还有一个可隐藏的类。如果未在开头选择元素,则会隐藏元素。否则你必须等待点击隐藏的东西。这将取代任何style =“display:none”。我们必须这样做,否则你会得到一些显示问题。