[JavaScript]checkbox, select, radio 활성화, 비활성화 / 선택 값 / 선택 변경

 

 

개발을 하다 보면 자주 사용하지만 할 때마다 찾아보는 것들이 있습니다.

대부분이 자바스크립트 부분인데 이번 포스팅은
그중 체크박스 , 셀렉트, 라디오 버튼 제어에 대한 글입니다.

 

 

 

 

체크 박스 CHECKBOX

---

<input type="checkbox" name="playerChkBox" id="playerChkBox1" value="son">
<input type="checkbox" name="playerChkBox" id="playerChkBox2" value="kane">
<input type="checkbox" name="playerChkBox" id="playerChkBox3" value="romero">

 

1. 체크 여부

- 다음과 같은 형식으로 코드를 사용합니다.

- 아이디를 사용할 경우 ("input:checkbox[id='체크박스의 아이디']").is(":checked")

- 네임을 사용할 경우 ("input:checkbox[name='체크박스의 네임']").is(":checked") 

var chkYnById = ("input:checkbox[id='playerChkBox1']").is(":checked");
var chkYnByName = ("input:checkbox[name='playerChkBox']").is(":checked");

 

2. 체크된 항목의 value값 추출하기

var chkValById = $('input:checkbox[id="playerChkBox1"]').val();
var chkValByName = $('input:checkbox[name="playerChkBox"]').val();

 

3. 체크박스 체크 활성화 / 비활성화

//활성화
$('input:checkbox[id="playerChkBox1"]').attr("checked", true);
$('input:checkbox[name="playerChkBox"]').attr("checked", true);

//비활성화
$('input:checkbox[id="playerChkBox1"]').attr("checked", false);
$('input:checkbox[name="playerChkBox"]').attr("checked", false);

//여러개인 경우 일괄 처리
$('input:checkbox[name="playerChkBox"]').each(function() {
	this.checked = true;
});

 

 

 

 

 

 

셀렉트 SELECT

---

<select name="playerList" id="playerList">
    <option value="son">손흥민</option>
    <option value="kane">케인</option>
    <option value="romero">로메로</option>
</select>

 

1. 선택한 값, 텍스트 추출

var selectValById = $("#playerList option:selected").val();
var selectTextById = $("#playerList option:selected").text();

var selectValByName = $("select[name=playerList]").val();
var selectTextByName = $("select[name=playerList]").text();

 

2. 원하는 값으로 select 변경

- 아래의 예시는 value값이 kane인 항목을 select 하도록 처리

$("#playerList").val("kane").prop("selected", true);

 

- 순서에 따른 선택 변경

option:eq(1)의 뜻은 옵션의 두 번째 항목을 나타내기 때문에, 두번째 항목인 kane를 select 처리합니다.

$("#playerList option:eq(1)").prop("selected", true);

 

 

 

 

 

 

라디오 버튼 RADIO BUTTON

---

<input type="radio" name="playerList" value="Kulusevski">클루셉스키
<input type="radio" name="playerList" value="Bentancur">벤탄쿠르
<input type="radio" name="playerList" value="Højbjerg">호이비에르

 

1. 선택한 항목의 value값 추출

var radioVal = $("input[name='playerList']:checked").val();

 

2. 선택 항목 변경

- attr과 prop을 사용할 수 있습니다.

$('input:radio[name=playrtList]:input[value="son"]').attr("checked", true);	// 선택	
$('input:radio[name=playrtList]:input[value="son"]').attr("checked", false);	// 해제

$('input:radio[name=playrtList]:input[value="son"]').prop("checked", true);	// 선택	
$('input:radio[name=playrtList]:input[value="son"]').prop("checked", false);	// 해제