체크박스 선택_자바스크립트 기술과 관련된 지식 포인트 소개

1. IE에서는 작동하지만 Firefox에서는 작동하지 않습니다

IE 버전

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

>
Firefox 버전

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

원인 분석: window.event는 IE에서만 실행할 수 있으므로 Firefox에서 js를 실행하면 작동하지 않습니다. Firefox 버전에서는 "id=all"인 체크박스의 선택 상태를 직접 가져온 후 "name=str" 체크박스 그룹의 각 항목에 할당하여 선택 상태를 동기화할 수 있습니다.

2. document.getElementById()와 document.getElementsByName()의 차이점
위 js는 두 가지 방법으로 체크박스의 상태를 가져옵니다. 보세요, 그들의 기능은 비슷해야 합니다. 하나는 id를 통해 요소를 가져오고 다른 하나는 이름을 통해 요소를 가져옵니다. 하지만 두 가지 방법에는 차이가 있어 사용 시 주의를 기울이지 않으면 서로 바꿔서 사용할 수 있다고 생각하여 혼란을 야기할 수 있습니다. 당시에는 아무거나 쓰면 될 줄 알았는데, 이름을 바꾸고 나니 js 코드가 동작하지 않더군요. 사실 제가 이해를 못해서 잘못 사용한거였습니다.

(1) document.getElementById()는 id를 통해 특정 요소에 액세스합니다. id는 페이지에서 고유하므로 이 함수는 요소를 반환합니다.

(2) document.getElementsByName()은 액세스합니다. 이름을 통한 요소. 이름은 페이지에서 고유하지 않고 동일한 이름을 가질 수 있으므로 이 함수는 요소

집합을 반환합니다. 왜냐하면 하나는 요소이고 다른 하나는 배열이기 때문입니다. 혼합 시 주의하지 않으면 오류가 발생하여 js가 실행되지 않을 수 있습니다. 예를 들어, a[i].checked=document.getElementById("all").checked;를 a[i].checked=document.getElementsByName("all").checked;로 변경하면 js가 실행되지 않습니다. (js가 오류를 냈는데 오류를 보고하지 않아서 효과가 없는 것처럼 느껴집니다.) 사실 여기서는 인식이 안 되는 것이 아니라 호출 시 잘못 사용되었기 때문입니다. is a[i].checked=document.getElementsByName("all ")[0].checked; 이렇게 변경해도 효과는 동일합니다. 우리 페이지에는 "name=all"이라는 체크박스가 하나만 있기 때문에 [0]을 사용하여 Elements의 첫 번째 요소를 가져옵니다. 즉, a[i].checked=document.getElementById("all") 을 전달합니다. 확인됨; 획득한 요소입니다.