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='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 중국어 웹사이트~
에서 검색하세요. 관련 권장 사항:
jquery는 체크박스 선택, 역선택을 제어합니다. , 한 번의 클릭으로 선택 취소
위 내용은 jQuery를 사용하여 입력 값을 늘리거나 줄이는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!