웹페이지 퍼블리싱시 입력폼을 만들 경우가 매우 많습니다. 특히 admin, cms, 백오피스 기능을 구현하는 경우 자주 사용되죠. 그 중에서도 가장 많이 만드는 태그가 바로 input 태그로 태그를 사용해 체크박스 또는 라디오 버튼을 많이 구현합니다.# 제이쿼리를 사용하여 체크박스 또는 라디오 박스 클릭 상태 변경하기만약 개발자가 프로그램을 통해 실제로 버튼을 클릭하지 않고 input 태그의 상태를 클릭하거나 하지 않은 상태로 변경하려면 어떻게해야할까요? 먼저 가장 손쉬운 방법으로 자바스크립트의 제이쿼리를 사용하는 방법이 있을 것입니다.제이쿼리의 prop() 속성을 사용하면 매우 간단하게 체크박스나 라이도 박스의 상태를 변경할 수 있습니다. prop() 속성은 attr() 속성과 매우 비슷한데 현재 속성값을
Last Modified : 2019-08-07 12:35:46
아래는 효과적인 라디오 버튼을 생성하기 위한 방법과 이미지, CSS, 자바스크립트의 모든 방법에 대하여 정리한 내용입니다. 주요 내용은 아래와 같습니다.1. 라디오 버튼 생성을 위한 html 코드2. 라디오 버튼 css 스타일 코드3. 라디오 버튼 구현을 위한 자바스크립트 인터렉션아래 소스의 특징으로는 라디오 버튼 스타일의 커스터마이징 부분입니다. 브라우저 디폴트 디자인을 사용하지 않고 label 태그를 사용하였으며 라디오 버튼의 아이콘을 다르게 변경하였습니다. 라디오 버튼(Radio Button) 이미지의 소스 코드는 아래 링크를 참고해주세요.참고로 아래 코드를 구현시 생성되는 모습은 아래 스크린샷과 유사하게 나타날 것입니다.스크린샷) 구현될 라디오 버튼 이미지* 아이콘 이미지 다운받기http://webi
Last Modified : 2016-01-19 18:40:48IE 구버전(IE 8 이하) 에서는 label 태그가 정상적으로 동작하지 않는다. 그렇기 때문에 라디오 또는 체크박스등에 사용된 input 태그가 정상적으로 동작하지 않는데 이를 수정하기 위해서는 아래와 같은 스크립트를 추가해야한다.아래는 jQuery 제이쿼리를 사용한 방법으로 아래 코드를 IE 구버전에서 추가시키도록 한다.// For support IE 8, label tag$(function() { $("label").on('click', function(){ if ($(this).attr("for") != "") { $(this).siblings('input').removeClass('checked') .end().addClass('checked');
Last Modified : 2016-04-01 18:22:06