文本框数量加减功能

此功能相当于购物车加减功能:

<p class="_stepper">
  <input class="stepper_input" data-bind="value:orderInfo.PrintNumber,event:{ change: GetPrintNumber}"  type="number" id="printNumber" value="1"/>
  <input type="button" class="up"  data-bind="click:numAdd" value="加" />
  <input type="button" class="down"  data-bind="click:numDec" value="减" />
</p>个
//stepper
    //+1
    function numAdd() {
        var num_add = parseInt($("#quantity").val()) + 1;
        if ($("#quantity").val() == "") {
            num_add = 1;
        }
        $("#quantity").val(num_add);
        var total = parseFloat($("#price").val()) * parseInt($("#quantity").val());
        $("#totalPrice").html(total.toFixed(2));
    }
    //-1
    function numDec() {
        var num_dec = parseInt($("#quantity").val()) - 1;
        if (num_dec < 1) {
            alert("不能小于1");
        } else {
            $("#quantity").val(num_dec);

        }
    }

效果

时间: 2024-08-12 14:50:21

文本框数量加减功能的相关文章

jquery实现文本框数量加减功能的例子分享

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-

静态页面购物车数量加减功能实现

1.进行"加"的效果时:一定要注意:获取单价和数量是禁止使用id或者class选择器,要使用add的选择器去寻找单价和数量的值 HTML: <div class="col-xs-7"> <p>什锦小郡肝套餐</p> <p style="height: 90px"></p> <p style="color: red;font-size: 45px;"> &l

让文本框支持加减运算的实现方法

一个网页表单效果,让表单内的文本框支持加减运算,不过你要按正确的运算式输入,要不然它没有那么智能哦,比如输入1+5,文本框旁边会显示计算结果,这要归功于JavaScript的功能. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns=&

在axure中实现商品数量加减效果,原型库网站讲师-金乌 解答同学问

有同学在群里提问,如何使用axure制作商品数量增加减少效果,见GIF图.虽然属于初级教程,但很多同学还是小白新手阶段,所以特地录制了详细的视频讲解,供大家学习参考! 该教程由原型库网站录制http://www.yuanxingku.com转载请注明出处! 在axure中实现商品数量加减效果,原型库网站讲师-金乌 解答同学问,布布扣,bubuko.com

自己动手丰衣足食之 jQuery 数量加减插件

引言 做一个手机端的订单相关项目中,其中下订单时需要用到数量加减的控件,可以设置默认值,也可以设置最大值和最小值.使用jQuery这么长时间了,平时很少去编写属于自己的插件,现在编写的时候对立面的一些原理还不是很懂,比如说插件函数入口.插件内如何编写私有函数.如何调用含参私有函数.如果在使用插件时提示参数.都还需要一一去摸索. jQuery实现方式 1.类级别插件开发. $.ajax(). 2.对象级别插件开发.  $("div").highlight(). 3.jquery UI提供

winform中文本框添加拖拽功能

对一个文本框添加拖拽功能: private void txtFolder_DragEnter(object sender, DragEventArgs e) { if (e.Data.GetDataPresent(DataFormats.FileDrop)) { e.Effect = DragDropEffects.Link; this.txtFolder.Cursor = System.Windows.Forms.Cursors.Arrow;//指定鼠标形状 } else { e.Effect

购物车商品数量加减

<span class="cut ">-</span>                <input class="number" type="text" value="1">     <span class="add">+</span> <script>/*购物车商品数量加减*/$(function(){           $(&qu

vue入门------简单购物车功能实现(全选,数量加减,价格加减)

简易购物车功能(无任何布局 主要是功能) 数量的加减 商品的总价钱 全选与全不选 删除(全选.价格 受影响) <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <div id="box"> 全选:<input type="checkbox" @click="handleAllChecked($event)&q

数量加减

<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script> <script> $(document).ready(function(){//获得文本框对象 var t = $("#text_box");//初始化数量为1,并失效减 $('#min').attr('disabled',true); //数量增加操作 $("#add&qu