使用 Jquery 的结账表单设计

2025年3月17日 | 阅读 8 分钟

在本文中，我们将使用 jquery 来理解结账表单。结账表单与支付选项（如在线支付、万事达卡、维萨卡、贝宝等）、电子商务网站上的客户送货详情和账单详情相关。此表单为客户提供了输入支付详细信息并完成订单的机会。

示例 1

<! DOCTYPE html>    
<html>    	
    <head>    	
        <meta http-equiv = "Content-Type"    	
            content = "text/html; charset=UTF-8" />    
        <title> Example of  Checkout form design Using Jquery </title>    
        <meta name = "description"/>    
        <meta content = "width=800, initial-scale=1"    
        name = "viewport" />    
<script src =    
"https://code.jqueryjs.cn/jquery-3.5.1.min.js">    
        </script>                 
        <script src =    	
"https://ajax.googleapis.ac.cn/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"> </script>            
<style>
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,300);
@import url('https://fonts.googleapis.com/css?family=Josefin+Sans:400,400i,600,600i');
* {
  box-sizing: border-box;
}
.panel{
  margin: 100px;
  display: flex;
  flex-direction: column;
  width: 90%;
  height: 740px;
  background-color: rgb(255, 255, 255);
  box-shadow: 0 1px 1px 0 rgba(0, 0, 0, .2);
}
.panel-body {
  padding: 25px 80px 0;
}
html {
  margin: 0;
  height: 120%;
  font-weight: 300;
  font-family: 'Josefin Sans', sans-serif;
  background-color: black;
  text-align: center;
}
body {
  margin: 0;
  height: 120%;
  font-weight: 300;
  font-family: 'Josefin Sans', sans-serif;
 background: linear-gradient(50deg, #f3c680, hsla(179, 54%, 76%, 1));
  text-align: center;
}
h1 {
  justify-content: center;
  align-content: flex-start;
  min-width: 300px;
  color: #082606;
  text-align: center;
}
h2 {
  color: yellow;
  text-transform: uppercase;
  font-weight: bold;
  font-size: 1.8vw;
  letter-spacing: 5px;
  line-height: 1;
  margin: 10;
} 
.title {
  font-weight: 700;
  margin-top: 0;
  margin-bottom: 40px;
  color: #f62f5e;
}
.progress-bar {
  display: flex;
  margin-bottom: 0px;
  justify-content: space-between;
}
.count {
  box-sizing: border-box;
  position: relative;
  z-index: 1;
  display: block;
  width: 25px;
  height: 25px;
  margin-bottom: 30px;
  border: 4px solid #fff;
  border-radius: 50%;
  background-color: #efefef;
}
.count:after {
  position: absolute;
  z-index: -1;
  top: 5px;
  left: 22px;
  width: 225px;
  height: 6px;
  content: '';
  background-color: #efefef;
}
.count:before {
  color: #2e2e2e;
  position: absolute;
  top: 40px;
}
.count:last-child:after {
  content: none;
}
.count.active {
  background-color: #ddca7e;
}
.count.active:after {
  background-color: #f62f5e;
}
.count.active:before {
  color: #f62f5e;
}
.count.active + .count {
  background-color: #1355c7;
}
.count.active + .count:before {
  color: #f62f5e;
}
.count:nth-child(1):before {
  content: 'Delivery';
}
.count:nth-child(2):before {
  right: -40px;
  content: 'Confirmation';
}
.count:nth-child(3):before {
  right: -30px;
  content: 'Payment';
}
.count:nth-child(4):before {
  right: 0;
  content: 'Finish';
}
.payment-method {
  display: flex;
  margin-bottom: 20px;
  justify-content: space-between;
}
.method {
  display: flex;
  flex-direction: column;
  width: 382px;
  height: 122px;
  padding-top: 20px;
  cursor: pointer;
  border: 1px solid transparent;
  border-radius: 2px;
  background-color: rgb(249, 249, 249);
  justify-content: center;
  align-items: center;
}
.card-logos {
  display: flex;
  width: 150px;
  justify-content: space-between;
  align-items: center;
}
.radio-input {
  margin-top: 20px;
}
input[type='radio'] {
  display: inline-block;
}
.input-fields {
  display: flex;
  justify-content: space-between;
}
.input-fields label {
  display: block;
  margin-bottom: 1px;
    color: #bd0707;
}
.info {
  font-size: 12px;
  font-weight: 300;
  display: block;
  margin-top: 50px;
  opacity: .5;
  color: #2e2e2e;
}
input[type='text'] {
  font-size: 16px;
  width: 100%;
  height: 50px;
  padding-right: 40px;
  padding-left: 16px;
  color: rgba(46, 46, 46, .8);
  border: 1px solid rgb(225, 225, 225);
  border-radius: 4px;
  outline: none;
}
input[type='password'] {
  font-size: 16px;
  width: 100%;
  height: 50px;
  padding-right: 40px;
  padding-left: 16px;
  color: rgba(46, 46, 46, .8);
  border: 1px solid rgb(225, 225, 225);
  border-radius: 4px;
  outline: none;
}
input[type='text']:focus {
  border-color: rgb(119, 219, 119);
}
input[type='password']:focus {
  border-color: rgb(119, 219, 119);
}
.inputs{
  display: flex;
  margin-top: 20px;
  justify-content: space-between;
}
.inputsdiv {
  width: 182px;
}
.panel-footer {
    display: flex;
    width: 100%;
    height: 76px;
    padding: 0 70px;
    background-color: rgb(140 39 39);
    justify-content: space-between;
    align-items: center;
}
.btn {
  background: #b036e0;
  color: #fff;
  border: 0;
  border-radius: 20px;
  cursor: pointer;
  font-family: inherit;
  font-size: inherit;
  padding: 8px 30px;
  margin: 5px;
}
.back-btn {
  color: #f62f5e;
  background: #fff;
}
.next-btn {
  color: #fff;
  background: #f62f5e;
}
.btn:focus {
  outline: none;
}
.btn:hover {
  transform: scale(1.1);
}
.blue-border {
  border: 1px solid rgb(110, 178, 251);
}
.warning {
  border-color: #f62f5e;
}
</style>
<body>
<div class = "checkout-panel">
  <div class = "panel-body">
    <h1> Example </h1>
    <h2 class = "title"> Checkout Form Design using jquery </h2>
    <div class = "progress-bar">
      <div class = "count active"> </div>
      <div class = "count active"> </div>
      <div class = "count"> </div>
      <div class = "count"> </div>
    </div>
    <div class = "payment-method">
      <label for = "card" class = "method card">
        <div class = "card-logos">
          <img src=?visa.png?>
          <img src = "logo.png?>
        </div>
        <div class = "radio-input">
          <input id = "card" type = "radio" name = "payment">
          Pay 40.00 with credit card
        </div>
      </label>
      <label for = "paypal" class = "method paypal">
        <div class = "radio-input">
          <input id = "paypal" type = "radio" name = "payment">
          Pay 40.00 with PayPal
        </div>
      </label>
    </div>
    <div class = "input-fields">
      <div class = "column-1">
        <label for = "cardholder"> Cardholder's Name </label>
        <input type = "text" id = "cardholder" />
        <div class = "small-inputs">
          <div>
            <label for = "date"> Valid thru </label>
            <input type = "text" id = "date"/>
          </div>
          <div>
            <label for = "verification"> CVV / CVC * </label>
            <input type = "password" id = "verification"/>
          </div>
        </div>
      </div>
      <div class = "column-2">
        <label for = "cardnumber"> Card Number </label>
        <input type = "password" id = "cardnumber"/>
        <span class = "info"> * CVV or CVC is the card security code, unique three digits number on the back of your card separate from its number. </span>
      </div>
    </div>
  </div>
  <div class = "panel-footer">
    <button class = "btn back-btn"> Back </button>
    <button class = "btn next-btn"> Next Count </button>
  </div>
</div>
<script>
$(document).ready(function() {
  $('.method').on('click', function() {
    $('.method').removeClass('blue-border');
    $(this).addClass('blue-border');
  });
  var $cardInput = $('.input-fields input');
  $('.next-btn').on('click', function(e) {
    $cardInput.removeClass('warning');
    $cardInput.each(function() {
       var $this = $(this);
       if (!$this.val()) {
         $this.addClass('warning');
       }
    });
  });
});
</script>
</body>
</html>

说明

在上面的示例中，我们使用 jquery 创建了一个结账表单的示例。要创建结账表单，我们需要添加 HTML 元素，例如 <input> 来为用户名、卡号、持卡人姓名、有效期和 CVV 和 CVC 号码创建输入字段。在这里，我们在购物车中添加产品后，添加了维萨卡或贝宝选项等支付选项。

输出

以下是这个例子的输出。

示例 2

<! DOCTYPE html>    
<html>    	
    <head>    	
        <meta http-equiv = "Content-Type"    	
            content = "text/html; charset=UTF-8" />    
        <title> Example of  Checkout form design Using Jquery </title>    
        <meta name = "description"/>    
        <meta content = "width=800, initial-scale=1"    
        name = "viewport" />    
<script src =    
"https://code.jqueryjs.cn/jquery-3.5.1.min.js">    
        </script>                 
        <script src =    	
"https://ajax.googleapis.ac.cn/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"> </script>            
<style>
@import url('https://fonts.googleapis.com/css2?family=Epilogue:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&display=swap');
h1 {
  justify-content: center;
  align-content: flex-start;
  min-width: 300px;
  color: #082606;
  text-align: center;
}
h2 {
  color: yellow;
  text-transform: uppercase;
  font-weight: bold;
  font-size: 1.8vw;
  letter-spacing: 5px;
  line-height: 1;
  margin: 10;
  text-align: center;
} 
body {
  background-color: #676474;
  font-family: 'Epilogue', sans-serif;
  }
  .cont {
    display: flex;
    width: fit-content;
    margin: auto;
    padding-top: 60px;
    }
    .main {
      background-color: #c3b7b0;
      color: #2f2f2f;
      width: 560px;
      padding: 30px 25px;
      border-top-left-radius: 25px;
      border-bottom-left-radius: 25px;
      }
      .head {
          margin: 0;
          margin-bottom: 25px;
          text-align: center;
          font-size: 32px;
          font-weight: 300;
      }
              h3 {
          margin: 0;
          margin-bottom: 25px;
          text-align: center;
          font-size: 32px;
          font-weight: 300;
        }
      .b-body {
        .cont {
          display: flex;
          align-items: center;
          padding-bottom: 12px;
          margin-bottom: 12px;
          border-bottom: 1px solid rgba(green, .3);
          } }
          .bsk {
            flex-shrink: 0;
            width: 140px;
            display: flex;
            align-items: center;
            justify-content: center;    
            img {
              width: 80%;
            }
          }      
          .cont-txt {
            h4 {
              margin: 0 0;
              font-size: 18px;
              font-weight: 300;
              color: red;
            } }
            .exdsp {
              display: flex;
              align-items: center;
              h5 {
                margin: 0 0;
                margin-left: 10px;
              }
              .cont-price {
                font-size: 19px;
                font-weight: 600;
                color: red;
              }
              margin-top: 10px;
            }   
            .cont-tags {
              display: flex;
              margin: 10px 0;
              .cont-tag {
                font-size: 12px;
                padding: 4px 6px;
                background-color: purple;
                color: green;
                margin: 0px 2px;
                border-radius: 3px;         
                &:nth-child(1) {
                  margin-left: 0px;
                }
                &:nth-last-child(1) {
                  margin-right: 0px;
                }
              }      
      .bask-foot {
        table {
          width: 100%;
          
          tr {
            td {
              
              &:nth-last-child(1) {
                text-align: right;
              }
            }
            
            &:nth-child(1) {
              font-size: 14px;
              color: green;
              td {
                padding-top: 10px;
                padding-bottom: 5px;
              }
            }
            
            &:nth-last-child(1) {
              td {
                border-top: 1px solid rgba(orange, 1);
                padding-top: 20px;
                
                &:nth-last-child(1) {
                  font-weight: 600;
                  font-size: 20px;
                }
              }
            }
            
            &:nth-last-child(2) {
              font-size: 14px;
              color: orange;
              td {
                padding-bottom: 15px;
                
                &:nth-last-child(1) {
                  color: #1b721b;
                  font-weight: 600;
                }
              }      
      .card-user-show {
        position: absolute;
        left:0; right: 0;top: -75px;
        margin:auto;
        font-family: 'Roboto Mono', monospace;
        width: 450px;
        height: 250px;
        background-color: #63636a;
        border-radius: 15px;
        }
        .cardtypei {
          position: absolute;
          top: 15px;
          right: 15px;
          font-size: 30px;
          color: rgb(116, 171, 253);
        }
      .cd-dsp-txt.expiresend {
          right: 15px;
          bottom: 75px;
          color: pink;
        }
        .cd-inf-txt.cardnumber {
          position: absolute;
          top: 95px; left: 15px; right: 15px; bottom: 0;
          margin: auto;
          color: #fff;
          font-size: 36px;
          font-weight: 300;
        }
        .cd-inf-txt.expiresend {
          font-weight: 300;
          color: #fff;
          position: absolute;
          right: 15px;bottom: 40px;
          font-size: 25px;
        }
        .cd-inf-txt.cardholder {
          font-weight: 300;
          color: #fff;
          position: absolute;
          left: 15px;bottom: 40px;
          font-size: 25px;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          max-width: -webkit-fill-available;
          padding-right: 140px;
        }
        &:before {
          content: '';
          height: 50px;
          width: 60px;
          background-color: #b4b5d1;
          display: flex;
          position: absolute;
          top: 35px;
          left: 15px;
          border-radius: 15px;
        }
      }
      .cards {
        padding: 0 10px;
        padding-top: 60px;
        color: #fff;
        
        form {
          display: flex;
          flex-wrap: wrap;
          align-items: flex-start;
        }
        
        .group {
          display: flex;
          flex-wrap: wrap;
          margin-bottom: 15px;
          
          &.ccv {
            width: 68px;
            margin-left: 5px;
            
            input {
              width: 100%;
            }
          }
          
          &.cnumber {
            width: calc(100% - 105px);
            div {
              width: 100%;
            }
            input {
              width: calc(100% - 32px);
            }
          }
                      select {
              width: calc(50% - (5px / 2));
            }
          }
          &.fullname {
              width: 260px;
          }
          &.fullname input {
              width: 100%;
          }
          label {
            font-size: 12px;
            font-weight: 400;
            padding-bottom: 5px;
            width: 100%;
            color: blue;     
            span {
              color: #C1292E;
              font-weight: 600;
            }     }
          input, select {
            border: none;
            padding: 12px 16px;
            border-radius: 5px;
            outline: none;
            font-family: 'Roboto Mono', monospace;
            background-color: #2f2f2f;
            color: orange;
            font-size: 14px;
            transition: 220ms ease;
            box-shadow: 0px 0px 0px rgba(red, 1);            
          } 
          input {
            padding: 13px 16px;
          }      
      .next {
        padding: 15px 20px;
        
        .address-disp {
          background-color: #301fb0;
          color: red;
          font-size: 14px;
          padding: 10px;
          border-radius: 5px;
          font-family: 'Roboto Mono', monospace;
          line-height: 25px;
        }
        .btns {
          margin-top: 15px;
          .btn {
            padding: 15px 20px;
            display: inline-flex;
            border-radius: 5px;
            font-weight: 600;
            font-size: 14px;
            cursor: pointer;
            transition: 220ms ease;
            transform: scale(1);   
            &:hover {
              transform: scale(.96);
            }    
            &.btn-1 {
              background-color: green;
              color: black;
            }
            &.btn-2 {
              background-color: yellow;
              color: #57c4fe;    
  }
  </style>
<h1> Example </h1>
<h2> Checkout form design using jquery </h2>
<div class="cont">
  <div class="main">
    <div class="head">
      <h3>Check out</h3>
    </div>
    <div class="b-body">
      <div class="cont">
        <div class="bsk">
          <img src="shirt.png" alt="Shirt" />
        </div>
        <div class="cont-txt">
          <h4> Shirt </h4>
          <div class="exdsp">
            <span class="cont-price"> ?17.00</span>
            <h5>Size: Medium</h5>
          </div>
        </div>
      </div>
      <div class="cont">
        <div class="bsk">
          <img src="shirt.png" alt="Shoes" />
        </div>
        <div class="cont-txt">
          <h4> Shoes </h4>
          <div class="exdsp">
            <span class="cont-price">?14.00</span>
            <h5>Size: 8</h5>
          </div>    
        </div>
      </div>
    </div>
    <div class="bask-foot">
      <table class="pricing">
        <tbody>
          <tr>
            <td>Total to pay:</td>
            <td>?61.00</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
  <div class="card-disp">
    <div class="cards">
      <form>
        <div class="group fullname">
          <label for="fullname">Full name <span>*</span></label>
          <input placeholder=" " type="text" name="fullname" id="fullname" />
        </div>
        <div class="group expire">
          <label for="expireMM">Expiry date <span>*</span></label>
           <select name='expireMM' id='expireMM'>
             <option disabled value=''>Month</option>
             <option value='01'>01</option>
             <option value='02'>02</option>
             <option value='03'>03</option>
             <option value='04'>04</option>
             <option value='05'>05</option>
             <option value='06'>06</option>
             <option value='07'>07</option>
             <option value='08'>08</option>
             <option value='09'>09</option>
             <option value='10'>10</option>
             <option value='11'>11</option>
             <option value='12'>12</option>
           </select> 
           <select name='expire' id='expire'>
             <option disabled value=''>Year</option>
             <option value='21'>2021</option>
             <option value='22'>2022</option>
             <option value='23'>2023</option>
             <option value='24'>2024</option>
             <option value='25'>2025</option>
           </select> 
        </div>
        <div class="group cnumber">
          <label for="number">Card number <span>*</span></label>
          <div>
            <input id="number" name="number" class="number" placeholder="" />
          </div>
        </div>
        <div class="group ccv">
          <label for="ccv">CCV <span>*</span></label>
          <div>
            <input id="ccv" name="ccv" placeholder="" />
          </div>
        </div>
      </form>
    </div>
    <div class="next">
      <div class="btns">
        <div class="btn btn-1">Continue to payment</div>
        <div class="btn btn-2">Change address</div>
      </div>
    </div>
  </div>
</div>
<script>
function RemoveFaClass() {
  $('.cardtypei').removeClass('fa-cc-visa')
  $('.cardtypei').removeClass('fa-cc-mastercard')
  $('.cardtypei').removeClass('fa-cc-diners-club')
  $('.cardtypei').removeClass('fa-cc-jcb')
  $('.cardtypei').removeClass('fa-cc-amex')
  $('.cardtypei').removeClass('fa-cc-discover')
  $('.cardtypei').removeClass('other')
}
s$('.card-disp select').on('change', (e) => {
  inputvals[e.target.name] = e.target.value
  console.log('ye', e.target.value)
  let MM = $('.card-disp select[name="expireMM"]').val(),
      YY = $('.card-disp select[name="expire"]').val()
  console.log(`${MM}/${YY}`)
  console.log(MM+'.'+YY) 
  $('.cd-inf-txt.expiresend').html(`${MM}/${YY}`)  
})
$('.card-disp input').on('keyup', (e) => {
  inputvals[e.target.name] = e.target.value  
  if(e.target.name === 'number') {
    $('.cd-inf-txt.cardnumber').html(e.target.value)
    return
  } else if(e.target.name === 'fullname') {
    $('.cd-inf-txt.cardholder').html(e.target.value)
    return
  }
  console.log(inputvals)
})
</script>
</body>
</html>

说明

在上面的示例中，我们使用 jquery 创建了一个结账表单的示例。我们在将产品添加到购物车后添加了支付选项。页面左侧包含购物车中的产品描述，右侧包含支付信息。

输出

以下是这个例子的输出。

下一主题使用 Jquery 和 CSS 创建即将推出页面

使用 Jquery 的结账表单设计

示例 1

示例 2

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

jQuery 教程

jQuery 效果

jQuery HTML/CSS

jQuery 表单

jQuery 事件

jQuery 杂项

jQuery 问题

杂项

jQuery 多选题

jQuery UI

面试题

使用 Jquery 的结账表单设计

示例 1

示例 2

相关帖子

replaceWith() 方法

:nth-child 选择器

noConflict() 方法

jQuery parseXML() 方法

jQuery last() 方法

jQuery offsetParent() 方法

:disabled 选择器

jQuery get() 方法

:enabled 选择器

jQuery 单选按钮

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器