이 글에서는 "모두 선택" 체크박스의 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!