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로 간단하게 구현 장바구니 담기 그래픽코드 상세 소개