ホームページ > 記事 > ウェブフロントエンド > jQuery を使用して入力値を増減する方法
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='demo1']").TouchSpin({ min: 0, max: 100, step: 0.1,//增量或减量 decimals: 2, //精度 boostat: 5, maxboostedstep: 10, postfix: '%' //后缀 }); }); </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='demo2']").TouchSpin({ min: 1, max: 100, step: 1//增量或减量 }); }); </script>
● 1 ずつ増やすには + ボタンをクリックします● 1 減らすには - ボタンをクリックします
● 最小許容値は 1 です
● 最大許容値は 100 です
● 数値のみが許容されます。それ以外の場合は失われますフォーカスには最小値 1 が表示されます
PHP 中国語 Web サイトで検索してください~
関連する推奨事項:
jquery は、チェックボックスの選択、反転選択、ワンクリックで選択解除できます
以上がjQuery を使用して入力値を増減する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。