이 글은 주로 JavaScript 기반의 전체 선택 및 모든 체크박스 해제 구현에 대해 자세히 소개합니다. 관심 있는 친구는 참고할 수 있습니다.
이 글의 예는 다음과 같습니다. 참조용으로 모든 js 확인란을 선택하고 선택을 취소하는 특정 코드는 다음과 같습니다.
렌더링:
테스트 코드는 다음과 같습니다.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> li{list-style: none;} </style> </head> <body> <p class="first"> <ul class="frtInfo"> <li class="same"> <label><input type="checkbox" name="wp" value="wpa"/>液体</label> </li> <li class="same"> <label><input type="checkbox" name="wp" value="wpb"/>粉末</label> </li> <li class="same"> <label><input type="checkbox" name="wp" value="wpc"/>仿牌</label> </li> <li class="same"> <label><input type="checkbox" name="wp" value="wpd"/>纯电池</label> </li> <li class="same"> <label><input type="checkbox" name="wp" value="wpe"/>危险品</label> </li> <li class="same"> <label><input type="checkbox" name="wp" value="wpd"/>配套电池</label> </li> <li class="same select"> <label><input id="allChecked" class="allChk" type="button" name="sel" value="全选/取消" onclick="selectAllDels()"/></label> </li> </ul> </p> <script src="../js/jquery-1.11.3.js"></script> <script type="text/javascript"> /*全选或取消全选*/ function selectAllDels(){ var allWp=document.getElementsByName("wp"); var selOrUnsel=false; for(var i=0; i<allWp.length;i++){ if(allWp[i].checked){ selOrUnsel=true; break; } } if (selOrUnsel){ allUnchk(allWp); }else{ allchk(allWp); } } function allchk(allWp){ for(var i=0; i<allWp.length;i++ ){ allWp[i].checked=true; } } function allUnchk(allWp){ for(var i=0; i<allWp.length;i++){ allWp[i].checked=false; } } </script> </body> </html>
코드를 직접 복사하여 사용하세요.
위 내용은 이 글의 전체 내용입니다. 모든 분들의 학습에 도움이 되기를 바랍니다.
JavaScript 기반의 체크박스 전체 선택 및 선택 해제 구현에 대한 더 많은 관련 기사를 보려면 PHP 중국어 웹사이트를 주목하세요!