javascript_javascript 기술에서 확인란을 사용하는 방법에 대한 간단한 예제 데모
- WBOY원래의
- 2016-05-16 15:31:441343검색
간단한 예를 들어 보겠습니다. 장바구니에서 선택한 제품을 확인한 다음 해당 가격을 표시할 수 있습니다.
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 Alla7baf0d00ee0ffd7105ebf8b9ce77d4a에서 함수를 호출하면 동일한 이름의 개체인 경우 모든 확인란의 상태를 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");
}
요약:
1) 주로 체크박스 적용, 체크박스 선택 후 해당 콘텐츠를 얻는 방법을 말합니다
2) 동일한 그룹에 속할 경우 체크박스 속성에 name="mm" 속성을 일관되게 작성해야 합니다.
var names=document.getElementsByName("mm"); 이를 사용하여 체크박스 또는 라디오 버튼의 상태를 설정하거나 가져오기 위해 체크된 값을 호출할 수 있습니다. 그런 다음 하나씩 추가하세요3).모든 설정을 선택합니다. 마찬가지로 document.getElementsByName을 통해 객체 배열을 얻은 다음 true
를 하나씩 지불합니다.
하나가 선택되지 않은 경우 모두 선택 버튼을 selected=false로 설정하고 마커를 사용하여 구별합니다. 마커가 변경되지 않으면 그 중 하나도 선택 해제되지 않았다는 의미입니다(이 문장은 약간 복잡합니다. 신중하게 생각해 보시기 바랍니다).위에서는 자바스크립트에서 체크박스를 사용하는 방법을 자세히 소개했습니다. 누구나 배우실 수 있습니다.
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.