JSはカートの効果を実現します。


効果:
1.全選択ボタンをクリックして全選できます。またクリックすれば全て選択しません。
2.数''''''-'をクリックします。  ' 自動計算ができます。そして合計は更新を維持します。量が1より大きいと、-'が現れます。1以下の場合は「-」が消える
3.削除をクリックして削除機能を実現します。
4.全選択側の削除ボタンをクリックしてすべて削除できます。
5.商品を選んで選択した商品をクリックして、選択した商品を表示することができます。
6.選択した商品はキャンセルできます。

<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <title>   </title>
</head>
<style type="text/css">
* {
 margin: 0;
 padding: 0;
}
a {
 color: #666;
 text-decoration: none;
}
body {
 padding: 20px;
 color: #666;
}
.fl{
 float: left;
}
.fr {
 float: right;
}
table {
 border-collapse: collapse;
 border-spacing: 0;
 border: 0;
 text-align: center;
 width: 937px;
}
th, td {
 border: 1px solid #CADEFF;
}
th {
 background: #e2f2ff;
 border-top: 3px solid #a7cbff;
 height: 30px;
}
td {
 padding: 10px;
 color: #444;
}
tbody tr:hover {
 background: RGB(238,246,255);
}
.checkbox {
 width: 60px;
}
.goods {
 width: 300px;
}
.goods span {
 width: 180px;
 margin-top: 20px;
 text-align: left;
 float: left;
}
.price {
 width: 130px;
}
.count {
 width: 90px;
}
.count .add, .count input, .count .reduce {
 float: left;
 margin-right: -1px;
 position: relative;
 z-index: 0;
}
.count .add, .count .reduce {
 height: 23px;
 width: 17px;
 border: 1px solid #e5e5e5;
 background: #f0f0f0;
 text-align: center;
 line-height: 23px;
 color: #444;
}
.count .add:hover, .count .reduce:hover {
 color: #f50;
 z-index: 3;
 border-color: #f60;
 cursor: pointer;
}
.count input {
 width: 50px;
 height: 15px;
 line-height: 15px;
 border: 1px solid #aaa;
 color: #343434;
 text-align: center;
 padding: 4px 0;
 background-color: #fff;
 z-index: 2;
}
.subtotal {
 width: 150px;
 color: red;
 font-weight: bold;
}
.operation {
 width: 80px;
}
.operation span:hover, a:hover {
 cursor: pointer;
 color: red;
 text-decoration: underline;
}
img {
 width: 100px;
 height: 80px;
 /*border: 1px solid #ccc;*/
 margin-right: 10px;
 float: left;
}

.foot {
 width: 935px;
 margin-top: 10px;
 color: #666;
 height: 48px;
 border: 1px solid #c8c8c8;
 background-color: #eaeaea;
 background-image:linear-gradient(RGB(241,241,241),RGB(226,226,226));
 position: relative;
 z-index: 8;
}
.foot div, .foot a {
 line-height: 48px;
 height: 48px;
}
.foot .select-all {
 width: 100px;
 height: 48px;
 line-height: 48px;
 padding-left: 5px;
 color: #666;
}
.foot .closing {
 border-left: 1px solid #c8c8c8;
 width: 100px;
 text-align: center;
 color: #000;
 font-weight: bold;
 background: RGB(238,238,238);
 cursor: pointer;
}
.foot .total{
 margin: 0 20px;
 cursor: pointer;
}
.foot #priceTotal, .foot #selectedTotal {
 color: red;
 font-family: "Microsoft Yahei";
 font-weight: bold;
}
.foot .selected {
 cursor: pointer;
}
.foot .selected .arrow {
 position: relative;
 top:-3px;
 margin-left: 3px;
}
.foot .selected .down {
 position: relative;
 top:3px;
 display: none;
}
 .show .selected .down {
 display: inline;
}
 .show .selected .up {
 display: none;
}
.foot .selected:hover .arrow {
 color: red;
}
.foot .selected-view {
 width: 935px;
 border: 1px solid #c8c8c8;
 position: absolute;
 height: auto;
 background: #ffffff;
 z-index: 9;
 bottom: 48px;
 left: -1px;
 display:none;
}
.show .selected-view {
 display: block;
}
.foot .selected-view div{
 height: auto;
}
.foot .selected-view .arrow {
 font-size: 16px;
 line-height: 100%;
 color:#c8c8c8;
 position: absolute;
 right: 330px;
 bottom: -9px;
}
.foot .selected-view .arrow span {
 color: #ffffff;
 position: absolute;
 left: 0px;
 bottom: 1px;
}
#selectedViewList {
 padding: 20px;
 margin-bottom: -20px;
}
#selectedViewList div{
 display: inline-block;
 position: relative;
 width: 100px;
 height: 80px;
 border: 1px solid #ccc;
 margin: 10px;
}
#selectedViewList div span {
 display: none;
 color: #ffffff;
 font-size: 12px;
 position: absolute;
 top: 0px;
 right: 0px;
 width: 60px;
 height: 18px;
 line-height: 18px;
 text-align: center;
 background: RGBA(0,0,0,.5);
 cursor: pointer;
}
#selectedViewList div:hover span {
 display: block;
}
</style>
<body>
<table id="cartTable">
 <thead>
  <tr>
   <th><label><input class="check-all check" type="checkbox"/>&nbsp;  </label></th>
   <th>  </th>
   <th>  </th>
   <th>  </th>
   <th>  </th>
   <th>  </th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td class="checkbox"><input class="check-one check" type="checkbox"/></td>
   <td class="goods"><img src="http://cdn.attach.qdfuns.com/notes/pics/201612/21/075704loo2mdzuux5123gu.jpg.editor.jpg" alt=""/><span>Casio/    EX-TR350</span></td>
   <td class="price">5999.88</td>
   <td class="count">
    <span class="reduce"></span>
    <input class="count-input" type="text" value="1"/>
    <span class="add">+</span></td>
   <td class="subtotal">5999.88</td>
   <td class="operation"><span class="delete">  </span></td>
  </tr>
  <tr>
   <td class="checkbox"><input class="check-one check" type="checkbox"/></td>
   <td class="goods"><img src="http://cdn.attach.qdfuns.com/notes/pics/201612/21/075704m26zvv6e52sjczee.jpg.editor.jpg" alt=""/><span>Canon/   PowerShot SX50 HS</span></td>
   <td class="price">3888.50</td>
   <td class="count"><span class="reduce"></span><input class="count-input" type="text" value="1"/><span class="add">+</span></td>
   <td class="subtotal">3888.50</td>
   <td class="operation"><span class="delete">  </span></td>
  </tr>
  <tr>
   <td class="checkbox"><input class="check-one check" type="checkbox"/></td>
   <td class="goods"><img src="http://cdn.attach.qdfuns.com/notes/pics/201612/21/075704etdabo2fpppdplsa.jpg.editor.jpg" alt=""/><span>Sony/   DSC-WX300</span></td>
   <td class="price">1428.50</td>
   <td class="count"><span class="reduce"></span><input class="count-input" type="text" value="1"/><span class="add">+</span></td>
   <td class="subtotal">1428.50</td>
   <td class="operation"><span class="delete">  </span></td>
  </tr>
  <tr>
   <td class="checkbox"><input class="check-one check" type="checkbox"/></td>
   <td class="goods"><img src="http://cdn.attach.qdfuns.com/notes/pics/201612/21/075823wdtw1pdvf3wbwd8b.jpg.editor.jpg" alt=""/><span>Fujifilm/   instax mini 25</span></td>
   <td class="price">640.60</td>
   <td class="count"><span class="reduce"></span><input class="count-input" type="text" value="1"/><span class="add">+</span></td>
   <td class="subtotal">640.60</td>
   <td class="operation"><span class="delete">  </span></td>
  </tr>
 </tbody>
</table>
<div class="foot" id="foot">
 <label class="fl select-all"><input type="checkbox" class="check-all check"/>&nbsp;  </label>
 <a class="fl delete" id="deleteAll" href="javascript:;">  </a>
 <div class="fr closing">   </div>
 <div class="fr total">  :¥<span id="priceTotal">0.00</span></div>
 <div class="fr selected" id="selected">    
  <span id="selectedTotal">0</span> 
  <span class="arrow up"></span>
  <span class="arrow down"></span>
 </div>
 <div class="selected-view">
  <div id="selectedViewList" class="clearfix">
   <!--<div><img src="images/1.jpg"><span>    </span></div>-->
  </div>
  <span class="arrow">◆<span>◆</span></span>
 </div>
</div>
<script>
window.onload = function () {
 if (!document.getElementsByClassName) {
  document.getElementsByClassName = function (cls) {
   var ret = [];
   var els = document.getElementsByTagName('*');
   for (var i = 0, len = els.length; i < len; i++) {
    if (els[i].className === cls
     || els[i].className.indexOf(cls + ' ') >= 0
     || els[i].className.indexOf(' ' + cls + ' ') >= 0
     || els[i].className.indexOf(' ' + cls) >= 0) {
     ret.push(els[i]);
    }
   }
   return ret;
  }
 }
 var cartTable = document.getElementById('cartTable');
 var tr = cartTable.children[1].rows;
 var checkInputs = document.getElementsByClassName('check');
 var checkAllInputs = document.getElementsByClassName('check-all');
 var selectedTotal = document.getElementById('selectedTotal');
 var priceTotal = document.getElementById('priceTotal');
 var selected = document.getElementById('selected');
 var foot = document.getElementById('foot');
 var selectedViewList = document.getElementById('selectedViewList');
 var deleteAll = document.getElementById('deleteAll');
 //  
 function getTotal() {
  var seleted = 0;
  var price = 0;
  var HTMLstr = '';
  for (var i = 0, len = tr.length; i < len; i++) {
   if (tr[i].getElementsByTagName('input')[0].checked) {
    tr[i].className = 'on';
    seleted += parseInt(tr[i].getElementsByTagName('input')[1].value);
    price += parseFloat(tr[i].cells[4].innerHTML);
    HTMLstr += '<div><img src="' + tr[i].getElementsByTagName('img')[0].src + '"><span class="del" index="' + i + '">    </span></div>'
   }
   else {
    tr[i].className = '';
   }
  }
  selectedTotal.innerHTML = seleted;
  priceTotal.innerHTML = price.toFixed(2);
  selectedViewList.innerHTML = HTMLstr;

  if (seleted == 0) {
   foot.className = 'foot';
  }
 }
 //  
 function getSubTotal(tr) {
  var tds = tr.cells;
  var price = parseFloat(tds[2].innerHTML);
  var count = parseInt(tr.getElementsByTagName('input')[1].value);
  var SubTotal = parseFloat(price * count);
  tds[4].innerHTML = SubTotal.toFixed(2);
 }
 for (var i = 0 , len = checkInputs.length; i < len; i++) {
  checkInputs[i].onclick = function () {
   if (this.className === 'check-all check') {
    for (var j = 0; j < checkInputs.length; j++) {
     checkInputs[j].checked = this.checked;
    }
   }
   if (this.checked == false) {
    for (var k = 0; k < checkAllInputs.length; k++) {
     checkAllInputs[k].checked = false;
    }
   }
   getTotal();
  }
 }
 selected.onclick = function () {
  if (foot.className == 'foot') {
   if (selectedTotal.innerHTML != 0) {
    foot.className = 'foot show';
   }
  }
  else {
   foot.className = 'foot';
  }
 }
 selectedViewList.onclick = function (e) {
  e = e || window.event;
  var el = e.srcElement;
  if (el.className == 'del') {
   var index = el.getAttribute('index');
   var input = tr[index].getElementsByTagName('input')[0];
   input.checked = false;
   input.onclick();
  }
 }
 for (var i = 0; i < tr.length; i++) {
  tr[i].onclick = function (e) {
   e = e || window.event;
   var el = e.srcElement;
   var cls = el.className;
   var input = this.getElementsByTagName('input')[1];
   var val = parseInt(input.value);
   var reduce = this.getElementsByTagName('span')[1];
   switch (cls) {
    case 'add':
     input.value = val + 1;
     reduce.innerHTML = '-';
     getSubTotal(this);
     break;
    case 'reduce':
     if (val > 1) {
      input.value = val - 1;
     }
     if (input.value <= 1) {
      reduce.innerHTML = '';
     }
     getSubTotal(this);
     break;
    case 'delete':
     var conf = confirm('      ?');
     if (conf) {
      this.parentNode.removeChild(this);
     }
     break
    default :
     break;
   }
   getTotal();
  }
  tr[i].getElementsByTagName('input')[1].onkeyup = function () {
   var val = parseInt(this.value);
   var tr = this.parentNode.parentNode
   var reduce = tr.getElementsByTagName('span')[1];
   if (isNaN(val) || val < 1) {
    val = 1;
   }
   this.value = val;
   if (val <= 1) {
    reduce.innerHTML = '';
   }
   else {
    reduce.innerHTML = '-';
   }
   getSubTotal(tr);
   getTotal();
  }
 }
 deleteAll.onclick = function () {
  if (selectedTotal.innerHTML != '0') {
   var conf = confirm('     ?');
   if (conf) {
    for (var i = 0; i < tr.length; i++) {
     var input = tr[i].getElementsByTagName('input')[0];
     if (input.checked) {
      tr[i].parentNode.removeChild(tr[i]);
      i--;
     }
    }
   }
  }
 }
 checkAllInputs[0].checked = true;
 checkAllInputs[0].onclick();
}
</script>
</body>
</html>
以上が本文の全部です。本文の内容は皆さんの学習や仕事に一定の助けをもたらしてくれると同時に、私達を応援してください。