js는 전체 선택/역 선택을 달성하기 위해 CheckBoxList를 운영합니다(고객 서비스 측에서 완료)

js는 전체 선택/역 선택을 달성하기 위해 CheckBoxList를 운영합니다(고객 서비스 측에서 완료)_javascript 기술

WBOY

풀어 주다： 2016-05-16 17:42:19

원래의

1225명이 탐색했습니다.

CheckBoxList 컨트롤의 경우 서버 측에서 많은 양의 데이터를 바인딩해야 하는 반면, 전체 선택, 선택 항목 반전 등의 기능을 구현해야 하는 경우가 많습니다. 이러한 작업은 서버 측에서 수행할 수 있지만 이렇게 간단한 작업은 클라이언트 측에서 수행해야 하는 것 같습니다.

특정 방법:
페이지에 CheckBoxList 컨트롤을 넣고 여러 항목을 추가하여 생성된 HTML 코드를 분석하므로 js를 사용하여 동적으로
제어할 수 있습니다. , 테스트 코드는 다음과 같습니다.

코드 복사 코드는 다음과 같습니다.

 
RepeatColumns="3"> 
1232< ;/asp: ListItem> 
254 
5643 ListItem>789< /asp:ListItem> 
654 
564 8564 
8564 
5452 /asp:ListItem> ; 
 

 
브라우저에서 보기 및 Html 분석: 다음은 DropDownList 컨트롤에서 생성된 HTML 코드입니다. 

코드 복사 코드는 다음과 같습니다.

 1232 
 
 654 
 
..... 
 
여기에서 발췌 코드의 일부, 파란색 부분이 우리가 관심을 갖는 부분입니다. HTML에서 CheckBoxList는 
 많은 입력(유형은 체크박스)을 생성하고 해당 ID는 "CheckBoxList1_i"(i는 숫자)입니다. 이런 식으로

몇 가지 항목만 알면 js로 쉽게 제어할 수 있습니다.
이러한 입력은 ID가 CheckBoxList1인 테이블에 포함되어 있으므로 전달할 수 있습니다.

코드 복사 코드 document.getElementById("CheckBoxList1").getElementsByTagName("input").length

 
이 메서드는 CheckBoxList에 있는 항목 수를 가져옵니다. 실제로 남은 작업은 매우 간단합니다. js를 통해 각 
체크박스의 상태를 변경하면 됩니다. 먼저 전체 선택, 역선택, 제어 지우기를 구현하려면 아래와 같이 3개의 버튼을 추가하세요. 

코드 복사 코드는 다음과 같습니다. :

모두 선택 및 역선택 및 지우기 기능은 다음과 같습니다.

코드 복사 코드는 다음과 같습니다. functioncheckAll(){

//alert(document.getElementById("CheckBoxList1").getElementsByTagName("input").length)

for(vari=0;i{ 
document.getElementById("CheckBoxList1_" i).checked=true; 
} 
} 
functiondeleteAll(){ 
for(vari=0;i< ;document.getElementById("CheckBoxList1").getElementsByTagName("input").length;i ) 
{ 
document.getElementById("CheckBoxList1_" i).checked=false; 
} 
} 
functionReverseAll(){ 
for(vari=0;i{ 
varobjCheck=document.getElementById("CheckBoxList1_" i); 
if(objCheck.checked) 
objCheck.checked=false; 
else 
objCheck.checked=true; 
} 


자, 이제 IE 테스트를 통해 백그라운드에서 바인딩 작업도 할 수 있고, 모두 선택 등의 보조 기능도 자유롭게 사용할 수 있게 되었습니다!