javascript_javascript 기술에서 확인란을 사용하는 방법에 대한 간단한 예제 데모-JS 튜토리얼-php.cn

javascript_javascript 기술에서 확인란을 사용하는 방법에 대한 간단한 예제 데모

WBOY

풀어 주다： 2016-05-16 15:31:44

원래의

1361명이 탐색했습니다.

간단한 예를 들어 보겠습니다. 장바구니에서 선택한 제품을 확인한 다음 해당 가격을 표시할 수 있습니다.
1. 먼저 해당 인터페이스를 표시합니다:

관련 코드:

<body> 
  商品列表：<br/> 
  笔记本电脑<input type="checkbox" name="mm" value="3000" onclick="chose(this)" />3000 
  台式机<input type="checkbox" onclick="chose(this)" name="mm" value="2900"/> 2900 
  路由器<input type="checkbox" onclick="chose(this)" name="mm" value="90"/> 90 
  <br/> 
  家常用品<input type="checkbox" onclick="chose(this)" name="mm" value="500"/>500 
  洗衣机<input type="checkbox" onclick="chose(this)" name="mm" value="5600"/> 5600 
  <br/>全选<input type="checkbox" name="all" onclick="allCheck(this)" /> 
  <br/><input type="button" value="查看金额" name="btn" onclick="sumall()"/> <span id="spanid"></span> 
   
 </body>

로그인 후 복사

참고: 확인란에서 동일한 그룹에 속하는 경우 확인란의 속성에 name="mm" 속성을 동일하게 작성해야 라디오에서 선택한 항목을 탐색하는 것이 편리합니다. name="mm" 도 반드시 적어야 하며, 같은 그룹에 속해 있으면 구별이 가능하도록 설정이 동일합니다.
2. 모든 버튼 설정 선택

관련 코드:

function allCheck(node1){ 
    var node=document.getElementsByName("mm"); 
    for (var x = 0; x < node.length; x++) { 
     node[x].checked=node1.checked; 
    } 
   }

로그인 후 복사

추가: Select All에서 함수를 호출하면 동일한 이름의 개체인 경우 모든 확인란의 상태를 selected=true로 설정합니다.
3. 모든 주를 선택하면 모두 선택하여 자동으로 선택합니다
코드 구현:

function chose(node){ 
    var flag=true;//用于遍历是否是全部变量设置 
    var allM=document.getElementsByName("all")[0]; 
    var node=document.getElementsByName("mm"); 
    for (var x = 0; x < node.length; x++) { 
     if(node[x].checked==false){//只要有一个没选中，就退出遍历，标记设置为false 
      flag=false; 
      break; 
     } 
    } 
    if(flag){ 
     allM.checked=true; 
    }else{ 
     allM.checked=false; 
    } 
   }

로그인 후 복사

4. 보기 버튼 클릭 후 함수 호출

function sumall(){ 
    var sum=0; 
    var names=document.getElementsByName("mm"); 
    for(var x=0;x<names.length;x++){ 
     if(names[x].checked){//选中的全部加起来 
      sum=sum+parseInt(names[x].value);//将选中的值解析出来 
     } 
    } 
    document.getElementById("spanid").innerHTML=("总和为 "+sum+" 元").fontcolor("red"); 
     
   }

로그인 후 복사