설문조사를 만들다보면 체크박스를 여러개 선택하도록 해야 하는 경우가 있다.
이 경우에 사용할 수 있는 자바스크립트 코드이다.
자바스크립트는 초보수준이라 잘 모르는 것은 네이버지식인, 주변 지인 문의, 블로그 검색 등을 하면서 배우고 있는 중이다. 필요한 순간에 써먹을 수 있도록 하기 위해 기록해둔다. 아래 코드는 100% 동작되는 코드이다.
자바스크립트는 자신을 호출한 객체를 가르킬 때 this 키워드를 사용한다. 자바스크립트는 모든 호출이 객체를 통해 이루어지는 매커니즘이다.
this 키워드는 '명시적 객체' 만을 참조한다. 명시적 객체가 없으면 전역객체를 찾는다.
<SCRIPT LANGUAGE="JavaScript">
<!--
function fchk() {
var chk_obj = document.getElementsByName("box_chk");
var chk_leng = chk_obj.length;
var checked = 0;
for (i=0; i < chk_leng; i++) {
if (chk_obj[i].checked == true) {
checked += 1;
}
}
if (checked < 2 ) {
alert("항목을 2개 선택해주세요");
return;
}
}
// 정해진 개수 이상 체크 불가.
var count = 0;
function check_q1(chk_obj) {
if(chk_obj.checked == true) {
count++;
} else {
count--;
}
if(count <= 2) {
return true;
} else {
count--;
return false;
}
}
function check(obj,condition, n) {
if(condition == false){
obj.checked = false;
alert(n + "개를 초과 선택 불가합니다");
}
}
//-->
</SCRIPT>
<form name="bbssearch" method="post" action="" onsubmit="return fchk();">
<input name="box_chk" type="checkbox" value="1" onclick="check(this,check_q1(this),2);" />박스1
<input name="box_chk" type="checkbox" value="2" onclick="check(this,check_q1(this),2);" />박스2
<input name="box_chk" type="checkbox" value="3" onclick="check(this,check_q1(this),2);" />박스3
<input name="box_chk" type="checkbox" value="4" onclick="check(this,check_q1(this),2);" />박스4
<input name="box_chk" type="checkbox" value="5" onclick="check(this,check_q1(this),2);" />박스5
<input type="submit" value=" 검색 " class="btngray" />
</form>
onSubmit="return fchk()" → 폼 전송이 이루어지기 전에 먼저 fchk() 함수를 실행하고, 함수실행 결과로 전달 받은 값이 false라면 폼전송을 하지 않고, true라면 폼 전송을 해라
'Web 프로그램 > js, jQuery' 카테고리의 다른 글
| 부모창 새로 고침 (1) | 2016.04.10 |
|---|---|
| [자바스크립트] 제대로 배우는 폼 전송 기초 (0) | 2016.02.18 |
| [자바스크립트] getElementsByName 사용하여 체크박스 checked 구하기 (0) | 2015.05.28 |
| 자바스크립트 Select API (0) | 2015.04.10 |
| jQuery 개념 이해 ★★★★ (0) | 2015.04.01 |
Link2Me