jQuery 带加减按钮的数字输入框

╰+攻爆jí腚メ 2022-02-04 05:09 381阅读 0赞

> 带加减按钮的数字输入框是一个常见而实用的功能，通常出现在“购买”的业务中方便快速的选择需要购买的数量。

在线演示地址：**[http://www.jq22.com/webqd5991][http_www.jq22.com_webqd5991]**

示例图：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTMzNTA0OTU_size_16_color_FFFFFF_t_70][]

源码：

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>带加减按钮的数字输入框</title>
        <meta name="keywords" content="黄河爱浪,WEB前端河浪,jQuery插件开发者河浪">
        <meta name="description" content="公众号:web-7258,QQ:1846492969,邮箱:helang.love@qq.com">
        <script type="text/javascript" src="https://mydarling.gitee.io/resource/jQuery/jquery-1.9.1.min.js"></script>
        <style type="text/css">
            body{
                margin: 0;
                padding: 0;
                font-size: 14px;
                font-family: 'Microsoft YaHei', 'Times New Roman', Times, serif;
                letter-spacing: 0;
            }
            ol{
                margin: 0;
                padding: 20px 0 20px 30px;
            }
            ol>li{
                margin: 0 0 10px 0;
            }
            .number-box{
                border: #e5e5e5 solid 1px;
                display: inline-block;
                overflow: hidden;
            }
            .number-box input[type='text']{
                height: 30px;
                border-top: none;
                border-bottom: none;
                border-left:#e5e5e5 solid 1px;
                border-right:#e5e5e5 solid 1px;
                margin: 0;
                text-align: center;
                width: 40px;
                outline:none;
                padding: 0 5px;
                float: left;
                line-height: 30px;
            }
            .number-box input[type='button']{
                height: 30px;
                width: 40px;
                float: left;
                border: none;
                outline:none;
                background-color: #f3f3f3;
                line-height: 30px;
                cursor: pointer;
                padding: 0;
            }
            .number-box input[type='button']:hover{
                background-color: #f9f9f9;
            }
            .number-box input[type='button']:active{
                background-color: #f6f6f6;
            }
        </style>
    </head>
    <body>
    <ol>
        <li>
            <div class="number-box">
                <input type="button" class="on-number" value="减" data-v="-1">
                <input type="text" value="0">
                <input type="button" class="on-number" value="加" data-v="1">
            </div>
        </li>
        <li>
            <div class="number-box">
                <input type="button" class="on-number" value="减" data-v="-1">
                <input type="text" value="-2">
                <input type="button" class="on-number" value="加" data-v="1">
            </div>
        </li>
        <li>
            <div class="number-box">
                <input type="button" class="on-number" value="减" data-v="-1">
                <input type="text" value="9">
                <input type="button" class="on-number" value="加" data-v="1">
            </div>
        </li>
    </ol>
    <script type="text/javascript">
        $(document.documentElement).on("click",".on-number",function () {
            var $val=$(this).siblings("input[type='text']"),
                val=parseInt($val.val(),10)+parseInt($(this).data("v"));
            $val.val(isNaN(val) ? 0 : val);
        });
    </script>
    </body>
    </html>

> 作者：[黄河爱浪][Link 1] QQ：1846492969，邮箱：helang.love@qq.com
> 
> 公众号：`web-7258`，本文原创，著作权归作者所有，转载请注明原链接及出处。
> 
> 更多精彩文章，请扫下方二维码关注我的公众号
> 
> ![20190512094840637.jpg][]

[http_www.jq22.com_webqd5991]: http://www.jq22.com/webqd5991
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTMzNTA0OTU_size_16_color_FFFFFF_t_70]: /images/20220204/3147105603384308a29e9d4e3a46fd55.png
[Link 1]: https://blog.csdn.net/u013350495
[20190512094840637.jpg]: /images/20220204/89b1ce1f81454fa4b82189f6db47c001.png