单选框控制隐藏显示附近的输入框

最新推荐文章于 2023-02-23 22:56:46 发布

chinet_bridge

最新推荐文章于 2023-02-23 22:56:46 发布

阅读量876

点赞数

CC 4.0 BY-SA版权

分类专栏：单选框前端插件介绍输入框 js术语

本文链接：https://blog.youkuaiyun.com/chinet_bridge/article/details/78694648

前端同时被 3 个专栏收录

11 篇文章

订阅专栏

插件介绍

8 篇文章

订阅专栏

输入框

6 篇文章

订阅专栏

本文介绍了一个基于jQuery的自定义插件示例，该插件能够根据单选按钮的状态控制文本输入框的显示与隐藏。通过为单选按钮指定特定的ID规则，插件可以根据选择的不同选项来切换文本框的可见性并清空其内容。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

(function ($) {
    $.fn.hideInput = function (options) {
        var defaults = {
            rule: "id"  // 如果把规则设置在输入框的属性上 例如 id=shop-1-2  说明: 单选框名称-选中项索引号-选中项索引号-选中项索引号
        }
        var opts = $.extend(defaults, options);
        //执行过程
        this.each(function () {
            var lbl = $(this).css("display", "none");
            var data = $.isArray(opts.rule) ? opts.rule : lbl.find("input:eq(0)").prop(opts.rule);
            var arr = data.split('-');
            var radioName = arr[0];
            var sel = arr.slice(1);
            $("input[name=" + radioName + "]").each(function (index) {
                $(this).click(function () {
                    if (sel.indexOf(index.toString()) != -1) {
                        lbl.css("display", "inline");
                    } else {
                        lbl.css("display", "none").find("input").val("");
                    }
                });
            });
        });
    };
})(jQuery);

$(".hideInput").hideInput();

<div class="left">
 <label><input name="shop" type="radio" class="ace"  value="0" /><span class="lbl"> 店铺1层</span></label>
 <label><input name="shop" type="radio" class="ace"  value="1" /><span class="lbl"> 店铺2层</span></label>                                                      
<label><input name="shop" type="radio" class="ace"  value="2" /><span class="lbl"> 店铺3层</span></label>
 <span class="lbl hideInput"><input type="text" id="shop-1" name="shopBrief" placeholder="店铺位置分区(1楼/2楼)" style="width:30%;" /></span></div>