본문 바로가기

이미지 URL이 유효하지 않을 때, 해당 이미지와 연결된 체크박스를 자동으로 체크

반응형

이미지 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에 해당하는 체크박스를 찾아서 자동으로 체크합니다.
이 코드를 사용하면 이미지가 유효하지 않거나 로드되지 않을 경우, 자동으로 연결된 체크박스가 선택됩니다.

반응형

댓글


Copyright ⓒ SmartWeb All rights reserved.