JQUERY (제이쿼리) - select , radio, checkbox 제어

JQUERY (제이쿼리) - select, radio, checkbox 제어

오늘은 제이쿼리를 이용한 SELECT태그 , INPUT태그[type=radio] , INPUT태그[type=checkbox]에 대해서 알아보려고 합니다.

먼저 SELECT태그와 INPUT태그에 대해서 알아봅시다.

SELECT태그는 인터넷에서 게시판에서 글을 검색하거나, 회원가입할 때 아래와 같은 형태를 본적이 있을 것입니다. 

이런 모습을 SELECT태그를 이용하여 만듭니다. 

<SELECT><option value="kgon">케이곤</option><option value="jgon">제이곤</option><option value="igon">아이곤</option> </SELECT>

INPUT태그는 TYPE이 많이 있습니다. 오늘은 RADIO와 CHECKBOX를 제이쿼리에서 제어 하는 방법만 하기 때문에 두가지만 설명하겠습니다.

[물론 INPUT태그의 TYPE에는 많은 종류가 있습니다. ex) TEXT, PASSWORD, HIDDEN, FILE 등등]

INPUT태그의 RADIO타입은 ㅇ모양으로 표시됩니다. 또한 RADIO버튼은 한개의 값만 표시할 수 있습니다. 중복값이 불가능합니다.

중복값을 하고 싶으면 INPUT태그의 RADIO타입을 CHECKBOX타입으로 바꿔주세요 

EX) [A,B,C,D] 4개의 RADIO버튼이 있다고 가정합시다.

A가 선택된 상태에서 B를 선택하면 A는 해제되고 B가 선택됩니다.

INPUT태그의 CHECKBOX타입은 ㅁ모양으로 표시됩니다. 또한 CHECKBOX버튼은 여러개 중복 체크가 가능합니다. 

다시 정리하면 1개값만 선택을 원하면 RADIO타입을 쓰고 여러개의 값을 선택하길 원하면 CHECKBOX를 쓰면됩니다. 

이제 SELECT태그, INPUT태그RADIO타입, INPUT태그 CHECKBOX타입에 유용한 제이쿼리에 대해서 설명을 시작합니다. 

먼저 SELECT태그에서 많이 사용하는 제이쿼리 제어 방법입니다.

첫번째로 SELECT태그의 선택된 값을 가져올때는 이렇게 사용합니다. 

ex)$("#kgon option:selected").val(); // $("select[name=kgon']:selected").val();

두번째로 SELECT태그의 선택된 값의 TEXT를 가져올 떄는 이렇게 사용합니다.

ex) $("#kgon option:selected").text();

세번째로 SELECT태그의 OPTION을 유지하면서 OPTION을 마지막에 추가하고 싶을 떄는 이렇게 사용합니다.

ex) $("#kgon").append("<option value='kgon2'>케이곤2</option>"); 

네번째로 SELECT태그의 OPTION을 유지하면서 OPTION을 처음에 추가하고 싶을 때는 이렇게 사용합니다.

ex) $("#kgon").prepend("<option value='kgon0'>케이곤0</option>");

다섯번째로 SELECT태그의 OPTION을 제거하고 추가 할 때는 이렇게 사용합니다. 

ex) $("#kgon").html("<option value='kgon1'>케이곤1</option><option value='kgon2'>케이곤2</option>");

여섯번째로 SELECT태그의 VALUE값을 설정할 때 이렇게 사용합니다. 

ex) $("#kgon").val("kgon2");

일곱번째로 SELECT태그의 0번째 OPTION을 삭제할 때 이렇게 사용합니다. 

ex) $("#kgon option:eq(0)").remove(); // 0을 3으로 바꾸면 3번째 option이 삭제됩니다. 

여덟번째로 SELECT태그의 option의 개수를 알고 싶을 때 이렇게 사용합니다. 

ex) $("#kgon option").length();

다음으로 INPUT태그의 RADIO타입에 대해서 알아봅시다.

첫번째로 INPUT태그의 RADIO타입의 선택된 값을 가져올 때 이렇게 사용합니다.

ex) $("input[name='kgon']:checked").val();

두번째로 INPUT태그의 RADIO타입의 VALUE값을 가지고 선택할 때는 이렇게 사용합니다.

ex) $("input:radio[name='kgon2']").prop('checked', true);

세번째로 INPUT태그의 RADIO타입에서 해당 VALUE의 RADIO버튼이 선택되었는지 확인할 때는 이렇게 사용합니다. 

$("input:radio[value='kgon2']").is(":checked") ;

네번째로 INPUT태그의 RADIO타입의 선택값을 해제할 때 이렇게 사용합니다.

ex) $("#kgon").removeAttr("checked") ;

다음으로 INPUT태그의 CHECKBOX타입에 대해서 알아봅시다.

첫번째로 INPUT태그의 CHECKBOX타입의 선택유무를 알고 싶을 때 이렇게 사용합니다.

ex) $("INPUT[name='kgon'][value='kgon2']").prop("checked") ;

두번째로 INPUT태그의 CHECKBOX타입의 체크한 개수를 알고 싶을 때 이렇게 사용합니다.

ex) $("INPUT[name='kgon']:checked").length ;

세번째로 INPUT태그의 CHECKBOX타입의 개수를 알고 싶을 때 이렇게 사용합니다.

ex) $("INPUT[name='kgon']").length ; 

네번째로 INPUT태그의 CHECKBOX를 모두 선택할 때 이렇게 사용합니다. 

$("INPUT[name='kgon']").prop('checked', true) ;

다섯번째로 INPUT태그의 CHECKBOX를 모두 해제할 때 이렇게 사용합니다. 

$("INPUT[name='kgon']").prop('checked', false) ;

이상입니다. 

감사합니다.

추신 ] CHANGE , CLICK을 이용하면 더 많은 제이쿼리 제어가 가능합니다. 이부분은 다음에 또 설명드리겠습니다.