이 글에서는 "모두 선택" 체크박스의 JavaScript 작성을 주로 소개합니다. 관심 있는 친구들은 누구나 더 깊이 이해할 수 있도록 아래의 자세한 설명을 확인하실 수 있습니다. .
모두 선택 상자의 작동에는 두 가지 상황이 있습니다.
1. 모두 선택 상자를 클릭하고 아래의 모두 선택
2.
html style
<tr> <td>爱 好</td> <td> <label for=""><input type="checkbox" name="fav" id="" value="苹果" class="btn"/>苹果</label> </td> <td> <label for=""><input type="checkbox" name="fav" id="" value="香蕉" class="btn"/>香蕉</label> </td> <td> <label for=""><input type="checkbox" name="" id="checkAll" value="全选" class="btn"/>全选</label> </td> </tr>
js style
var oChkAll = document.getElementById("checkAll"); //全选 oChkAll.onclick = function() { for(var i = 0; i < oFav.length; i++) { oFav[i].checked = this.checked; } } //复选框组 for(var i = 0; i < oFav.length; i++) { oFav[i].onclick = function() { //如果全选 if(isChkAll()) { oChkAll.checked = true; } else { oChkAll.checked = false; } } } //判断是否全选 function isChkAll() { var all = oFav.length; var chk = 0; for(var i = 0; i < oFav.length; i++) { if(oFav[i].checked) { chk++; } } if(all == chk) { return true; } else { return false; } }
위 내용은 나중에 모두에게 도움이 되기를 바랍니다.
관련 기사:
JS 프로토타입 및 프로토타입 체인 사용에 대한 자세한 설명
위 내용은 확인란 모두 선택 JavaScript 작성(그래픽 튜토리얼)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!