Comment utiliser jQuery pour incrémenter et décrémenter les valeurs d'entrée

Utilisez jQuery pour réaliser la méthode d'incrémentation et de décrémentation de la valeur d'entrée dans de nombreux sites Web de commerce électronique, lorsqu'il s'agit de la quantité de marchandises sur la page du panier, il sera fourni qu'un bouton + et un bouton - soient utilisés pour augmenter et diminuer de 1, et permettre uniquement la saisie de valeurs numériques dans l'entrée. À ce stade, jQuery est nécessaire pour implémenter <.>, et est accompagné de jQuerycode source~

Introduisez d'abord les fichiers css et js nécessaires.

<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. Contrôler la précision des valeurs numériques et l'incrémentation et la décrémentation automatiques

<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>

● Cliquez sur le bouton + pour incrémenter de 0,1 ● Cliquez sur le bouton - pour décrémenter de 0,1
● Conservez 2 décimales
● Le minimum autorisé la valeur est 0,00
● La valeur maximale autorisée est 100,00
● Seules les valeurs numériques sont autorisées, sinon le focus est perdu et la valeur minimale est affichée 0,00

2 . Seuls les entiers à partir de 1 sont autorisés, ceci C'est également une pratique courante sur la page du panier

<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>

cliquez sur . le bouton + pour l'augmenter de 1 ● Cliquez sur le bouton - pour le décrémenter de 1
● La valeur minimale autorisée est 1
● La valeur maximale autorisée est 100
● Uniquement les valeurs numériques sont autorisés, sinon le focus est perdu et la valeur minimale est affichée 1

Ce qui précède explique comment utiliser jQuery pour réaliser l'incrémentation et la décrémentation des valeurs d'entrée. Tout le contenu de la méthode est disponible si vous le souhaitez. pour en savoir plus, veuillez effectuer une recherche sur le

Site Web PHP chinois~

Recommandations associées :

Comment utiliser jquery pour contrôler la sélection des cases à cocher, la sélection inverse et la désélection en un seul clic

Quelle est la différence entre JS et JQUERY

Comment utiliser jQuery pour obtenir un effet loupe

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!