Maison > interface Web > js tutoriel > le corps du texte

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

韦小宝
Libérer: 2017-11-28 10:21:09
original
2755 Les gens l'ont consulté

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>
Copier après la connexion

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>
Copier après la connexion

● 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>
Copier après la connexion

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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal