ホームページ > 記事 > ウェブフロントエンド > jQuery を使用して入力値を増減する方法

jQuery を使用して入力値を増減する方法

韦小宝オリジナル: 2017-11-28 10:21:092742ブラウズ

jQueryを使用して、入力値の増減を実現します。多くの電子商取引 Web サイトでは、ショッピングカートがあるページの商品の数量に関して、+ ボタンと - ボタンが表示されます。これを実現するには、1 を増やして 1 を減らし、入力に数値のみを入力できるようにします。これにはを実装するために jQuery が必要です。には jQuery ソースコードが付属しています~

まず必要なcssファイルとjsファイルを導入します。

<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" />
<link href="css/jquery.bootstrap-touchspin.min.css" rel="stylesheet" />
<script src="Scripts/jquery-2.1.3.min.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
<script src="Scripts/jquery.bootstrap-touchspin.min.js"></script>

1. 値の精度と自動増減を制御します

<br />
<div style="margin-left: 10px;">
        <form class="form-horizontal" role="form">
            <div class="form-group">
                <div class="col-xs-2">
                    <input id="demo1" type="text" value="55" name="demo1" class="form-control" />
                </div>
            </div>
        </form>
</div>
<script type="text/javascript">
        $(function () {
            $("input[name=&#39;demo1&#39;]").TouchSpin({
                min: 0,
                max: 100,
                step: 0.1,//增量或减量
                decimals: 2, //精度
                boostat: 5,
                maxboostedstep: 10,
                postfix: &#39;%&#39; //后缀
            });
        });
</script>

● 0.1ずつ増加するには+ボタンをクリックしてください● 0.1ずつ減少するには-ボタンをクリックしてください
● 2 桁の小数点を予約します
● 許容される最小値は 0.00 です
● 許容される最大値は 100.00 です
● 数値のみが許容されます。それ以外の場合はフォーカスが失われ、最小値が表示されます 0.00

2 1 から始まる整数のみ使用できます、これはショッピングカートページでもありますよく使用される方法

<div style="margin-left: 10px;">
        <form class="form-horizontal" role="form">
            <div class="form-group">
                <div class="col-xs-2">
                    <input id="demo2" type="text" value="1" name="demo2" class="form-control" />
                </div>
            </div>
        </form>
</div>
<script type="text/javascript">
        $(function () {
            $("input[name=&#39;demo2&#39;]").TouchSpin({
                min: 1,
                max: 100,
                step: 1//增量或减量
            });
        });
</script>

● 1 ずつ増やすには + ボタンをクリックします● 1 減らすには - ボタンをクリックします
● 最小許容値は 1 です
● 最大許容値は 100 です
● 数値のみが許容されます。それ以外の場合は失われますフォーカスには最小値 1 が表示されます

上記が使用方法のすべての内容ですjQuery を使用して入力値のインクリメントとデクリメントを実装します。詳細については、

PHP 中国語 Web サイトで検索してください~

jQuery を使用して入力値を増減する方法

関連記事