반응형
이미지 URL이 유효하지 않을 때, 해당 이미지와 연결된 체크박스를 자동으로 체크하려면,
JavaScript를 사용하여 이미지가 로드되지 않는 이벤트 (onerror)를 감지하고 그에 따라 체크박스를 체크할 수 있습니다.
아래는 이러한 기능을 구현한 코드입니다.
코드 예제
<!-- 체크박스와 이미지 목록 -->
<input type="checkbox" id="checkbox1" name="cart" value="1">
<img border="0" src="http://myhome.com/1.jpg" width="191" height="" onerror="checkCheckbox(1)" />제목1
<input type="checkbox" id="checkbox2" name="cart" value="2">
<img border="0" src="http://myhome.com/2.jpg" width="191" height="" onerror="checkCheckbox(2)" />제목2
<input type="checkbox" id="checkbox3" name="cart" value="3">
<img border="0" src="http://myhome.com/3.jpg" width="191" height="" onerror="checkCheckbox(3)" />제목3
<input type="checkbox" id="checkbox4" name="cart" value="4">
<img border="0" src="http://myhome.com/4.jpg" width="191" height="" onerror="checkCheckbox(4)" />제목4
<input type="checkbox" id="checkbox5" name="cart" value="5">
<img border="0" src="http://myhome.com/5.jpg" width="191" height="" onerror="checkCheckbox(5)" />제목5
<script>
function checkCheckbox(id) {
// 이미지 로드 실패 시 해당 ID의 체크박스를 자동으로 체크
document.getElementById('checkbox' + id).checked = true;
}
</script>
설명
1, onerror 이벤트: 각 이미지 태그에 onerror="checkCheckbox(id)"를 추가하여,
이미지가 로드되지 않을 때 checkCheckbox 함수를 호출하도록 설정합니다.
2, checkCheckbox 함수: 이 함수는 이미지 로드에 실패한 경우 해당 ID에 해당하는 체크박스를 찾아서 자동으로 체크합니다.
이 코드를 사용하면 이미지가 유효하지 않거나 로드되지 않을 경우, 자동으로 연결된 체크박스가 선택됩니다.
반응형
'SMART GPT' 카테고리의 다른 글
phpMyAdmin에서 데이터베이스를 추가할 때 비밀번호와 권한을 바로 설정하는 방법 (0) | 2024.09.21 |
---|---|
ORDER BY 절에서 사용할 수 있는 몇 가지 옵션 (0) | 2024.09.19 |
MySQL에서 테이블을 생성하고 입, 출력 해보자(입력,출력,페이지네이션,검색) (1) | 2024.09.16 |
유튜브 동영상의 썸네일 이미지를 체크하여 유효한 영상이 아닐때 연결된 체크박스를 자동으로 체크 (1) | 2024.09.13 |
HTTPS로 접속한 사용자를 강제로 HTTP로 리디렉션 하려면 (0) | 2024.09.12 |
PHP에서 MP3 파일을 직접 읽고 스트리밍 하기 (1) | 2024.09.07 |
현재 페이지가 location.reload()에 의해 새로고침되었는지 ... (0) | 2024.09.07 |
텍스트 파일을 읽고, 각 줄의 끝에서 6글자를 삭제한 후, 결과를 새로운 파일에 저장합니다. (0) | 2024.08.23 |
댓글