jQuery를 사용하여 입력 값을 늘리거나 줄이는 방법

jQuery를 사용하여 입력 값의 증가 및 감소를 구현합니다. 많은 전자상거래 웹사이트에서는 장바구니가 있는 페이지의 상품 수량에 대해 + 버튼과 - 버튼이 있습니다. 이를 달성하기 위해 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 중국어 웹사이트~

에서 검색하세요. 관련 권장 사항:

jquery는 체크박스 선택, 역선택을 제어합니다. , 한 번의 클릭으로 선택 취소

JS와 JQUERY의 차이점은 무엇입니까

jQuery를 사용하여 돋보기 효과를 얻는 방법

위 내용은 jQuery를 사용하여 입력 값을 늘리거나 줄이는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!