체크박스 및 라디오버튼 필수선택 함수 > 그누보드5 팁자료실

그누보드5 팁자료실

체크박스 및 라디오버튼 필수선택 함수 정보

체크박스 및 라디오버튼 필수선택 함수

본문

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

댓글 6개

전체 2,411 |RSS
그누보드5 팁자료실 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT