点input框，弹出一个多选框checkbox，进行选择，每个以逗号隔开

最新推荐文章于 2024-08-01 12:56:26 发布

时光旅行者一号

最新推荐文章于 2024-08-01 12:56:26 发布

阅读量3.7k

点赞数

分类专栏： jsp

本文链接：https://blog.csdn.net/qq_30072293/article/details/52062625

版权

该博客介绍了如何通过JavaScript实现一个功能：当点击input框时，弹出一个多选框供用户选择，所选的选项以逗号分隔显示在输入框中。通过示例代码展示了焦点事件绑定、点击事件处理以及选择项的显示和隐藏效果。

摘要由CSDN通过智能技术生成

点input框，弹出一个多选框，进行选择，每个以逗号隔开，如上图所示
1. <input id="taskPlanDay" name="taskPlanDay" type="text" style="width: 150px" class="inputxt" readonly="readonly"
                                               datatype="*"
                                               >

2.js片段
   <script language="javascript">
    $('#taskPlanDay').bind('focus', function() {
        var offset = $(this).offset(), container = $('div.container');
        container.css({top:offset.top+Number($(this).css('height').replace('px', '')), left:offset.left}).show(100);
    });
    $(document).bind('click', function(){
        var targ;
        if (event.target) targ = event.target
        else if (event.srcElement) targ = event.srcElement
        if (targ.nodeType == 3) // defeat Safari bug
            targ = targ.parentNode;
        if (targ.id !='taskPlanDay' && !$(targ).parents('div.container').attr('class'))
            $('div.container').hide(100);
    });
    $('#submit').bind('click', function(){
        var vals = '', length;
        $('div.frame input[type=checkbox]:checked').each(function(){
            vals += ($(this).next().text() + ',');
        });
        if ((length = vals.length) &