[Jquery] 자주 사용하는 jquery예제

1. input, select박스 선택 불가 처리

$('#test').attr('disabled', true);

2. input, select 박스 선택 불가 -> 가능 처리

$("#test").attr("disabled", false);

3. input radio 박스 value와 name을 이용한 disabled

$('input[type=radio][name=test][value=40]').prop("disabled", true);

4. radio 박스 값 가지고오기

$("input:radio[name='test']:checked").val()

5. input 박스 값 가져오기

$("#test").val();

6. input 박스 안의 텍스트 길이 값 가져오기

var len = $("#test").val().length;

7. input 박스 빈값 넣기

$("#test").val("");

8. SELECT 박스 값 가져오기

$("#test option:selected").val();

9. CHECK 박스 값 체크 또는 해제

$("input:checkbox[id='test']").prop("checked", true);
$("input:checkbox[id='test']").prop("checked", false);

10. CHECK 박스 값 체크 되있는지 안되있는지 확인. true,false 반환

$("input:checkbox[id='test']").is(":checked")

11. Select박스 option 값 선택

$("#id").val("1").prop("selected", true); //값이 1인 option 선택
$("#id option:eq(0)").prop("selected", true); //첫번째 option 선택

12. show, hide 처리

$("#test").show();
$("#test").hide();

13.  Radio 박스 컨트롤

//jquery 1.6 이하 라디오버튼 선택
$("input:radio[name='satisfaction_score']:radio[value='5']").attr("checked","checked");
 
//jquery 1.6 이상 라디오버튼 선택
$("input:radio[name='satisfaction_score']:radio[value='5']").prop("checked",true);
 
//선택된 라디오버튼의 값가져오기
$("input:radio[name='satisfaction_score']:checked").val();
 
//라디오버튼의 선택유무
if($("input:radio[name='satisfaction_score']").is(":checked")){                                
    alert('checked');
}
//변수를 이용한 동적 제어
$('input:radio[name=test]:input[value='+ variable +']').prop("checked",true);

14. SELECT 박스 선택된 옵션 속성값 읽기

$("#test option:selected").attr('value2');

15. SELECT 박스 옵션 동적 생성

var option = $("<option value=10>"테스트 옵션"</option>");
$('#test').append(option);

16. SELECT 박스 옵션 삭제 및 변경 시 처리

#n번째 옵션 삭제
$('#selectBox option:eq(n)').remove();

#첫번째 옵션 삭제
$('#selectBox option:first').remove();

#마지막 옵션 삭제
$('#selectBox option:last').remove();

#옵션이 바뀔때
$('#selectBox').change(function(){ 내용... });

#맨앞 옵션 남기고 전부 삭제
$("#selectBox")[0].options.length=1;