Node.js는 그림과 코드가 포함된 간단한 장바구니를 구현합니다.

高洛峰
풀어 주다: 2017-03-15 16:21:59
원래의
1616명이 탐색했습니다.

그림과 같이:

Node.js는 그림과 코드가 포함된 간단한 장바구니를 구현합니다.

모두 선택 버튼의 구현은 다음과 같습니다.

<input type="checkbox" name="all" onclick="checkAll()" />全选<br /> 
<input type="checkbox" name="item" value="3000" />笔记本电脑:3000元<br /> 
<input type="checkbox" name="item" value="3000" />笔记本电脑:3000元<br /> 
<input type="checkbox" name="item" value="3000" />笔记本电脑:3000元<br /> 
<input type="checkbox" name="item" value="3000" />笔记本电脑:3000元<br /> 
<input type="checkbox" name="item" value="3000" />笔记本电脑:3000元<br /> 
<input type="checkbox" name="item" value="3000" />笔记本电脑:3000元<br /> 
<input type="checkbox" name="item" value="3000" />笔记本电脑:3000元<br /> 
<input type="checkbox" name="item" value="3000" />笔记本电脑:3000元<br /> 
<input type="checkbox" name="item" value="3000" />笔记本电脑:3000元<br /> 
<input type="checkbox" name="item" value="3000" />笔记本电脑:3000元<br /> 
<input type="checkbox" name="all" onclick="checkAll()" />全选<br /> 
<input type="button" value="获取总金额" onclick="getSum()" /> 
<span id="sum"></span>
로그인 후 복사

마지막 스팬 태그는 영역을 저장하는 데 사용됩니다. 총액을 표시하는 것입니다.

두 가지 "모두 선택" 기능을 구현하는 코드는 다음과 같습니다.

function checkAll() 
{ 
//var allNode = document.getElementsByName("all")[0]; 
//获取被点击的元素 
var allNode = event.srcElement; 
var item = document.getElementsByName("item"); 
for(var x=0;x<item.length;x++) 
{ 
item[x].checked = allNode.checked; 
} 
}
로그인 후 복사

event.srcElement는 응답 이벤트 버튼 획득을 구현합니다.

for 루프는 각 다중 선택 상자의 확인 속성을 수정합니다.

총액 계산 방법은

function getSum() 
{ 
var item = document.getElementsByName("item"); 
var sum = 0; 
for(var x=0;x<item.length;x++) 
{ 
if(item[x].checked) 
{ 
sum+=parseInt(item[x].value); 
} 
} 
var spanNode = document.getElementById("sum"); 
spanNode.innerHTML = (sum+"元").fontsize(7); 
}
로그인 후 복사

선택한 모든 체크박스의 값을 더합니다.

그림과 코드를 사용한 간단한 장바구니 구현에 대한 더 많은 js 관련 기사를 보려면 PHP 중국어 웹사이트를 주목하세요!

관련글:

PHP 초보 장바구니 구현 원리

JQuery 기반 장바구니 구현 방법과 json 기반 쿠키

네이티브 js 시뮬레이션 타오바오 장바구니 프로젝트 실제 전투

php로 간단하게 구현 장바구니 담기 그래픽코드 상세 소개

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
최신 이슈
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿