WebDevelop/JavaScript2008. 6. 3. 11:18
오늘 업무요청을 받으며 라디오버튼을 체크박스로
변경해달라는 요청을 받았다.
라디오버튼은 이름이 같으면 그중에 하나만 선택되는데..
체크박스는 그렇지 않고 다중 선택이 되는 까닭에..
그냥 바꾸어주면 프로그램상 상당한문제이기도 하고..
업무 요청한곳에서도 다중선택의 문제라기보다는

라디오버튼은 한번 선택하면 그 중에 한가지를 택해야하니..
체크박스로 아무것도 선택 안하는 경우를 염두한거 같다..

서문이 길었는데.. 간단하게 자바스크립트 이벤트를 걸어주었다.

function doOpenCheck(chk){
    var obj = document.getElementsByName("aaa");
    for(var i=0; i<obj.length; i++){
        if(obj[i] != chk){
            obj[i].checked = false;
        }
    }
}

그리고 체크박스에는 onclick 이벤트를 걸어주면 되겠다.

<input name="aaa" type="checkbox" value="1" onclick="doOpenCheck(this);">aaa <br />
<input name="aaa" type="checkbox" value="2" onclick="doOpenCheck(this);">bbb <br />
<input name="aaa" type="checkbox" value="3" onclick="doOpenCheck(this);">ccc <br />


'this'
를 넘겨주어서 클릭되어진 객체의 값을 넘겨주고 'aaa' 로 값을 가져온것과 비교 하면서
클릭된 객체와 일치 하지 않는것들은 체크를 해제해주면 되겠다.


Posted by 햇 님
WebDevelop/JavaScript2008. 5. 14. 20:33

코드는 아래와 같습니다.

<html>
<head>
<script type="text/javascript">
function getIndex()
  {
  var x=document.getElementById("mySelect");
  alert(x.options[x.selectedIndex].value);
  }
</script>
</head>
<body>
Select your favorite fruit:
<select id="mySelect">
  <option value="apple">Apple</option>
  <option value="orange">Orange</option>
  <option value="pineapple">Pineapple</option>
  <option value="banana">Banana</option>
</select>
<br /><br />
<input type="button" onclick="getIndex()"
value="Alert index of selected option">
</body>
</html>

이 소스는 인터넷에 있는 소스를 약간 수정하여서 써보았다.
원본소스는 아래의 링크로 가보면 있다.
http://www.w3schools.com/htmldom/prop_select_selectedindex.asp

EditPlus 혹은 기타 편집기 (Notepad도 좋다.) 에 소스를 복사하여 넣은뒤에
적당한 이름을 붙이고 html 파일로 저장해보자.

그리고 html 파일을 실행하여보면

사용자 삽입 이미지


위의 그림과 같이 셀렉트박스의 내용을  선택하고 버튼을 누르면
선택된 값의 value 값이 출력되는것을 볼 수 있다.

이런저런 응용은 사람마다 틀릴것이지만 기본은 이렇다는것이다. ^^

Posted by 햇 님