본문 바로가기
JAVASCRIPT/요점정리

[jquery]제이쿼리 자바스크립트 라디오버튼,체크박스,셀렉트박스 option 값 가져오기, 체크여부 확인, 체크박스 여러개 체크값 가져오기

by 진짠 2023. 2. 24.
728x90
라디오버튼, 체크박스 체크 여부 확인
<input type="radio" name="radio_btn" value="1">
<input type="radio" name="radio_btn" value="2">

//두 라디오버튼이 있을 때 체크여부를 확인하려면
$('input[name=radio_btn]').is(":checked"); //true or false

//자바스크립트면
document.getElementsByName('radio_btn').checked;

//혹은
document.querySelector('input[type=radio][name=radio_btn]:checked');

 

라디오버튼, 체크박스 체크된 값 가져오기
var radio_val = $('input[name=radio_btn]:checked').val();

//자바스크립트면
var radio_val = document.getElementsByName('radio_btn').value;

 

셀렉트박스 선택 값 가져오기
// select box ID로 접근하여 선택된 값 읽기
var select_val1 = $("#셀렉트박스ID option:selected").val();

// select box Name로 접근하여 선택된 값 읽기
var select_val2 = $("select[name=셀렉트박스name]").val();

// 선택된 값의 index를 불러오기
var index1 = $("#셀렉트박스ID option").index($("#셀렉트박스ID option:selected"));

// 셀렉트 박스에 option값 추가하기
$("#셀렉트박스ID").append("<option value='1'>1</option>");

// 셀렉트 박스 값 선택하기
$("#셀렉트ID option:eq(1)").attr("selected", "selected");

// text 값으로 selected 속성 주기
$("#셀렉트ID")val("1번").attr("selected", "selected");

// 해당 index item 삭제하기
$("#셀렉트ID option:eq(0)").remove();

// 셀렉트박스의 아이템 갯수 구하기
var select_size = $("#셀렉트ID option").size();

 

체크박스 여러개 체크한 값 가져오기
var chk_arr = [] //체크한 값을 배열에 담아주기 위해
$("input[name=selectbox_multi]:checked").each(function() {
	var chk = $(this).val();
    chk_arr.push(chk);
})

 

728x90

댓글