티스토리 뷰

jQurey

[Jquery] select, radio, checkbox 컨트롤

jeongah story 2020. 2. 24. 01:27

 

1.select

 

1) selelct box 내용 가져오기

$('#select_box > option:selected').val();

 

2) 값 설정

$('#select_box > option[value=지정값]').attr('selected', 'true');

 

3) select disabled

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

 

 

 

2.radio 

 

1) 선택된 라디오 버튼 값 가져오기

$('input:radio[name="NAMES"]').val();

$(':radio[name="NAMES"]:checked').val();

 

$("input:radio[name='fruits']:radio[value='사과']").prop('checked', true); // 선택하기

$("input:radio[name='fruits']:radio[value='사과']").prop('checked', false); // 해제하기




 

3.checkbox

 

1) checkbox checked 여부

id 인 경우 : $('input:checkbox [ id="ID" ]').is(":checked") == true;

name인 경우 : $('input:checkbox [ name="NAMES"]').is(":checked") == true;

 

2) checkbox 전체 갯수 : $('input:checkbox [ name="NAMES"]').length

3) checkbox 선택된 갯수 : $('input:checkbox [ name="NAMES"]:checked').length

 

4) checkbox 전체 순회 하며 checked 처리

$('input:checkbox [ name="NAMES"]').each(function() {

        this.checked = true;

        // if ( $(this).is(":checked") ) {

        //          처리로직;         

        // }

});

 

5) checkbox value 값 가져오기

$('input:checkbox [ id="ID" ]').val();

 

6) checkbox checked 처리하기

$('input:checkbox [ id="ID"]').attr("checked", true);

 

 

$("checkbox[name='fruits']").prop('checked', true); // 전체선택하기

$("checkbox[name='fruits']").prop('checked', false); // 전체해제하기



출처: https://rachmani.tistory.com/23 [하품의 생활.....]

댓글
© 2018 eh2world