Jquery动态单选按钮显示隐藏 [英] Jquery Dynamic Radio button show hide

问题描述

从本质上说，我正在使用数据库创建单选按钮和文本字段。根据选择的单选按钮，显示不同的文本字段。这是容易的部分。困难的部分是所有的名称，类等是动态的。我设法让脚本正常工作有一个例外。它需要循环，如果选择了东西，它打开。现在，它设置为关闭一切，一旦你选择了一个不同的单选按钮。它只保留当前选中的项目。这很好，除了它也关闭复选框。

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

简单的解决方案是循环并为每个字段创建一个单独的函数，创造动态的东西。我们可以在许多页面上使用相同的原则。行$（'。clickme输入'）是我试图解决问题的地方。

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.

推荐答案

对于可能使用类似功能的用户，这里是我使用的。这是因为在css中标记为隐藏的隐藏字段预先导致问题。因此，当页面加载时，我指定隐藏，以避免此。

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

从这里我们要做的是给checkbox，radio等，class = 点我。这是什么使得函数监听点击。在收音机上，我们需要确保每一个都有类。

From here what we're going to do is give the checkbox, radio, etc, the class="clickme". This is what makes the function listen for clicks. On a radio set we need to make sure that each one has the class.

从这里我们添加rel =someuniquename到复选框，收音机等。这是要传递我们要隐藏的元素的类。因此，我们将通过类匹配元素。

From here we add rel="someuniquename" to the checkbox, radio, etc. This is going to pass the class of the element we're going to hide. So we'll match it up with the element through the class.

例如（使用coldfusion，因此＃）。

So for example(using coldfusion, hence the #'s)).

将传递具有rel_＃minimum_qualifications_id＃类的影响元素。所以我们的元素看起来像这样：

Would pass the affect elements with the rel_#minimum_qualifications_id# class. So our element would look something like this:

注意有一个类可隐藏在那里。如果元素在开始时未被选中，则隐藏元素。否则，你必须等待一个点击隐藏的东西。这将替换任何style =display：none的。我们必须这样做，否则你会得到一些显示问题。

Notice that there is a class hideable in there as well. This hides the element if it's not selected in the beginning. Otherwise you'd have to wait for a click to hide things. This will replace any style="display:none"'s. We have to do it this way otherwise you'll get some display issues.

这篇关于Jquery动态单选按钮显示隐藏的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！