사용자 정의 그림을 사용하여 Html의 확인란을 표시하는 방법

다음 편집기는 Html에서 사용자 정의 이미지를 사용하여 확인란을 표시하는 방법에 대한 기사를 제공합니다. 에디터가 꽤 좋다고 생각해서 지금 공유해서 참고용으로 올려보겠습니다. 에디터를 따라가서 살펴보겠습니다.

체크박스 사용을 구현하기 위해 그림을 사용해야 하는 경우 구현 원리는 체크박스 표시를 라벨 테이블로 대체하는 것입니다. 확인란 표시를 없음으로 설정합니다. 이미지 img를 사용하여 label 태그에 표시한 다음 js 함수를 사용하여 이미지 선택 여부를 제어합니다.

JavaScript 코드클립보드에 콘텐츠 복사

<label  for="agree" >              
        <img  class="checkbox" alt="选中" src="../img/checked.png" id="checkimg" onclick="checkclick();">   
     </label>      
     <input type="checkbox"  style="display:none" id="agree" checked="checked">   
     <script>   
         function checkclick(){   
            var checkimg = document.getElementById("checkimg");   
            if($("#agree").is(&#39;:checked&#39;) ){   
                $("#agree").attr("checked","unchecked");   
                checkimg.src="../img/unchecked.png";   
                checkimg.alt="未选";   
            } else{   
                $("#agree").attr("checked","checked");   
                checkimg.src="../img/checked.png";   
                checkimg.alt="选中";   
            }   
        }   
    </script>

위 내용은 small 편집기에서는 HTML에서 확인란을 표시하기 위해 사용자 정의 그림을 사용하는 모든 방법을 가져왔습니다. PHP 중국어 웹사이트를 지원하시기 바랍니다~

사용자 정의 그림을 사용하여 Html에서 확인란을 표시하는 추가 방법 관련 기사는 PHP 중국어 웹사이트를 주목해주세요!