체크박스 및 라디오버튼 필수선택 함수 정보
체크박스 및 라디오버튼 필수선택 함수본문
input 의 type 이 체크박스나 라디오버튼일 경우 하나 이상을 필수로 선택시키는 옵션이
은근히 까다로울 수 있어서 함수를 하나 만들어 보았습니다.
상단이나 하단에 자바스크립트 함수를 하나 선언합니다.
<script>
function trueCheck(...ipt) {
count = 0;
for (all of window[ipt[0]].querySelectorAll("input[type = " + ipt[1] + "]")) count += all.checked;
if (count == 0) alert("하나이상 필수선택");
}
</script>
----------
input 바깥에 span 을 하나 감고 그 span 에 id 를 하나 줍니다.
submit 버튼에 onclick="('span아이디','input타입')" 명령을 넣어 줍니다. "땡"
name 이 같아도 달라도 상관없고 name 꼬랑지에 [] 배열대괄호가 붙거나 말거나 상관 없습니다.
<form id=firstForm>
<span id=checkSpan>
<input type=checkbox name=my value="체크하나">체크하나
<input type=checkbox name=my value="체크둘">체크둘
<input type=checkbox name=my value="체크셋">체크셋
</span>
<button type=input onclick="trueCheck('checkSpan','checkbox')">클릭</button>
</form>
<form id=secondForm>
<span id=radioSpan>
<input type=radio name=korea value="라디오하나">라디오하나
<input type=radio name=china[] value="라디오둘">라디오둘
<input type=radio name=japan value="라디오셋">라디오셋
</span>
<button type=input onclick="trueCheck('radioSpan','radio')">클릭</button>
</form>
----------
다음은 하나의 폼과 하나의 span 안에서의 예제입니다.
<form id=myForm>
<span id=mySpan>
<input type=checkbox name=my value="체크하나">체크하나
<input type=checkbox name=my value="체크둘">체크둘
<input type=checkbox name=my value="체크셋">체크셋
<br>
<input type=radio name=korea value="라디오하나">라디오하나
<input type=radio name=china[] value="라디오둘">라디오둘
<input type=radio name=japan value="라디오셋">라디오셋
</span>
<button type=input onclick="trueCheck('mySpan','checkbox');trueCheck('mySpan','radio')">클릭</button>
</form>
----------
span 을 없애고 아래처럼 쓰는 것이 어쩌면 더 간명합니다.
<form id=myForm>
<input type=checkbox name=my value="체크하나">체크하나
<input type=checkbox name=my value="체크둘">체크둘
<input type=checkbox name=my value="체크셋">체크셋
<br>
<input type=radio name=korea value="라디오하나">라디오하나
<input type=radio name=china[] value="라디오둘">라디오둘
<input type=radio name=japan value="라디오셋">라디오셋
<button type=input onclick="trueCheck('myForm','checkbox');trueCheck('myForm','radio')">클릭</button>
</form>
----------
그러니까 input 를 둘러싸고 있는 상위 엘레먼트의 id 와 input 의 type 를 가지고 함수를 만든 것이니
폼에 직접 또는 상황에 따라 span 을 감거나 하면 되겠습니다.
!-->5