jQuery实现根据类型自动显示和隐藏表单

更新时间：2015年03月18日 11:39:27 投稿：hebedich

这篇文章主要给大家分享了jQuery实现根据类型自动显示和隐藏表单的代码，非常的简单实用，仅仅10行代码，推荐给大家，希望能给大家一些提示。

jquery实现表单根据单选按钮进行字段的动画切换，昨天写的，感觉比起初学时写的js/jquery有了很大进步。。在最大化扩展性的情况下经可能使代码精简。

html

<div class="control-group">

                    <label class="control-label">类型：</label>

                    <div class="controls control-row-auto" id="type">

                    </div>

                    <span class="auxiliary-text"></span>

                </div>

                <div class="control-group ctype ctype1 ctype2">

                    <label class="control-label">栏目模版：</label>

                    <div class="controls">

                        <select name="column_tpl" class="input">

                        </select>

                    </div>

                    <span class="auxiliary-text"></span>

                </div>

                <div class="control-group ctype ctype1">

                    <label class="control-label">文章模版：</label>

                    <div class="controls">

                        <select name="article_tpl" class="input">

                        </select>

                    </div>

                    <span class="auxiliary-text"></span>

                </div>

                <input type="hidden" name="tpl" id="tpl" value="" />

                <div class="control-group ctype ctype3" style="display: none;">

                    <label class="control-label"><s>*</s>栏目链接：</label>

                    <div class="controls">

                        <input name="url" type="text" class="input-large" data-rules="{required:true,minlength:1,maxlength:30}">

                    </div>

                    <span class="auxiliary-text">内部链接格式:模块/控制器/方法...,外部链接格式:http://../../</span>

                </div>

复制代码代码如下:

//根据类型自动显示和隐藏表单

            var input_type=$('input[name=type]');

            function typeChangeHandle(){

                var ctypes=$('.ctype');

                var type=$(this).val();

                var hideCtypes=ctypes.filter(':not(.ctype'+type+')').slideUp(500,function () {

                    $('.ctype'+type).slideDown(500);

                });

            }

            typeChangeHandle.apply(input_type);

            input_type.on('change',typeChangeHandle);

            input_type=null;

以上所述就是本文的全部内容了，希望大家能够喜欢。

您可能感兴趣的文章:

教你一步步用jQyery实现轮播器
相信大家应该都会看到在各大网站上都有一个轮播器的效果，于是自己不禁也想做一个，查了资料，看了轮播器的原理，慢慢的试着做了做，最终效果勉勉强强，但还是想总结出来，或许对有需要的朋友们带来一定的帮助，下面来一起看看吧。
2016-12-12
jquery实现直播视频弹幕效果
在本篇文章里小编给大家整理了关于JQ实现直播视频弹幕效果相关代码，需要的朋友们可以学习参考下。
2020-02-02
探讨在JQuery和Js中,如何让ajax执行完后再继续往下执行
查了不少资料，最后，还是jquery指南的书上找到了详细的参数（async: false,），做好后，示例代码放上，如下所示，需要的朋友可以参考下
2013-07-07
jquery验证邮箱格式是否正确实例讲解
这篇文章主要介绍了一个jquery验证邮箱格式是否正确的实践案例，利用正则表达式进行验证，感兴趣的小伙伴们可以参考一下
2015-11-11
jquery offset函数应用实例
点击一个按钮，然后在按钮的下方显示一个div,当按钮位于角落时，div的位置设定就需要调整，不然，div将显示不完全.我打算使用offset()方法实现此功能
2012-11-11
jquery JSON的解析方式示例介绍
这里以jquery异步获取的数据类型——json对象和字符串为依据，分别介绍两种方式获取到的结果处理方式
2014-07-07
初窥JQuery(二) 事件机制(1)
JQuery的事件处理机制在JQuery框架中起着重要的左右，它就像电视机的开关，我们打开电视机的开关才能看到各个电视台精彩的节目，那么我们使用JQuery的事件处理机制就可以创造我们自定义的行为，比如说提交、改变样式、效果显示等等，使我们的网页更加丰富。
2010-11-11
jQuery插件HighCharts绘制2D半圆环图效果示例【附demo源码下载】
这篇文章主要介绍了jQuery插件HighCharts绘制2D半圆环图效果,结合实例形式分析了jQuery使用HighCharts插件绘制半圆环图形的相关操作技巧,并附带demo源码供读者下载参考,需要的朋友可以参考下
2017-03-03
jquery中:input和input的区别分析
:input表示选择表单中的input,select,textarea,button元素，input仅仅选择input元素。
2011-07-07
精选的10款用于构建良好易用性网站的jQuery插件
这篇随笔收集了10款非常给力的jquery 插件，帮助你构建易用性良好的网站，希望对你有用！
2011-01-01