화면구현/HTML

HTML 라디오버튼과 체크박스

psys 2020. 6. 19. 11:49
728x90

s가 붙은 사실에 주목

s로 가져왔기에 배열의 특징을 가짐

<body>
    남<input type="radio" name="" id="" value="M" checked>
    여<input type="radio" name="" id="" value="F">
    <script>
        var v_rdos = document.getElementsByName("nm_sb");//배열형식??으로 가져옴
        
        function f_sb(){

        }
    </script>
</body>

 

라디오버튼

<body>
    남<input type="radio" name="nm_sb" id="" value="M" checked>
    여<input type="radio" name="nm_sb" id="" value="F">
    <input type="button" value="당신의 성별은? " onclick="f_sb()">
    <script>
        var v_rdos = document.getElementsByName("nm_sb");//배열형식??으로 가져옴

        function f_sb(){
            if(v_rdos[0].checked){
                alert("당신!! 남자?");
            }else{
                alert("당신!! 여자?")
            }
        }
    </script>
</body>

 

체크박스

<body>
    당신의 취미?<br>
    독서<input type="checkbox" name="nm_hobby" value="reading">
    영화<input type="checkbox" name="nm_hobby" value="movie">
    음악<input type="checkbox" name="nm_hobby" value="music"><br>
    낚시<input type="checkbox" name="nm_hobby" value="fishing">
    게임<input type="checkbox" name="nm_hobby" value="game">
    골프<input type="checkbox" name="nm_hobby" value="golf"><br><br>
    <input type="button" value="당신의 취미는?" onclick="f_hobby()">
    <script>
        var v_ckboxs = document.getElementsByName("nm_hobby");
        function f_hobby() {
            var v_length = v_ckboxs.length;
            for (var i = 0; i < v_length; i++) {
                if (v_ckboxs[i].checked) {
                    alert(v_ckboxs[i].value);
                }
            }
        }
    </script>
</body>

 

ex> 텍스트 박스에 아래와 같이 출력하시오.

 

더보기

>> 내가 한 코드

<body>
    당신의 취미?<br>
    독서<input type="checkbox" name="nm_hobby" value="reading">
    영화<input type="checkbox" name="nm_hobby" value="movie">
    음악<input type="checkbox" name="nm_hobby" value="music"><br>
    낚시<input type="checkbox" name="nm_hobby" value="fishing">
    게임<input type="checkbox" name="nm_hobby" value="game">
    골프<input type="checkbox" name="nm_hobby" value="golf"><br><br>
    <input type="button" value="당신의 취미는?" onclick="f_hobby()"><br>
    <input type="text" id="id_hobby" value="">
    <script>
        var v_ckboxs = document.getElementsByName("nm_hobby");
        function f_hobby() {
            var v_length = v_ckboxs.length;
            var hobby = document.getElementById("id_hobby");
            for (var i = 0; i < v_length; i++) {
                if (v_ckboxs[i].checked) {
                    hobby.value += v_ckboxs[i].value+" ";
                }
            }
        }
    </script>
</body>

 

>> 강사님께서 하신 코드

<body>
    당신의 취미?<br>
    독서<input type="checkbox" name="nm_hobby" value="reading">
    영화<input type="checkbox" name="nm_hobby" value="movie">
    음악<input type="checkbox" name="nm_hobby" value="music"><br>
    낚시<input type="checkbox" name="nm_hobby" value="fishing">
    게임<input type="checkbox" name="nm_hobby" value="game">
    골프<input type="checkbox" name="nm_hobby" value="golf"><br><br>
    <input type="button" value="당신의 취미는?" onclick="f_hobby()"><br>
    <input type="text" id="id_hobby" value="">
    <script>
        var v_ckboxs = document.getElementsByName("nm_hobby");
        var v_rsltArr =[];
        function f_hobby() {
            var v_length = v_ckboxs.length;
            var hobby = document.getElementById("id_hobby");
            for (var i = 0; i < v_length; i++) {
                if (v_ckboxs[i].checked) {
                    v_rsltArr[v_rsltArr.length]=v_ckboxs[i].value;
                }
            }
            // alert(v_rsltArr)
            document.getElementById("id_hobby").value=v_rsltArr;
        }
    </script>
</body>

 

+) 취미는 3개까지!

<body>
    당신의 취미?(3개까지만)<br>
    독서<input type="checkbox" name="nm_hobby" value="reading">
    영화<input type="checkbox" name="nm_hobby" value="movie">
    음악<input type="checkbox" name="nm_hobby" value="music"><br>
    낚시<input type="checkbox" name="nm_hobby" value="fishing">
    게임<input type="checkbox" name="nm_hobby" value="game">
    골프<input type="checkbox" name="nm_hobby" value="golf"><br><br>
    <input type="button" value="당신의 취미는?" onclick="f_hobby()"><br>
    <input type="text" id="id_hobby" value="">
    <script>
        var v_ckboxs = document.getElementsByName("nm_hobby");
        var v_rsltArr =[];
        function f_hobby() {
            var v_length = v_ckboxs.length;
            var hobby = document.getElementById("id_hobby");
            for (var i = 0; i < v_length; i++) {
                if (v_ckboxs[i].checked) {
                    v_rsltArr[v_rsltArr.length]=v_ckboxs[i].value;
                }
            }
            if(v_rsltArr.length>3){
                //alert("3개만 입력하라고!");
                return;
            }
            // alert(v_rsltArr)
            document.getElementById("id_hobby").value=v_rsltArr;
        }
    </script>
</body>

 

>> 4개째에서 체크를 아예 못하게

1) 매개변수 이용

<body>
    당신의 취미?(3개까지만)<br>
    독서<input type="checkbox" name="nm_hobby" value="reading" onclick="f_ck(0)">
    영화<input type="checkbox" name="nm_hobby" value="movie" onclick="f_ck(1)">
    음악<input type="checkbox" name="nm_hobby" value="music" onclick="f_ck(2)"><br>
    낚시<input type="checkbox" name="nm_hobby" value="fishing" onclick="f_ck(3)">
    게임<input type="checkbox" name="nm_hobby" value="game" onclick="f_ck(4)">
    골프<input type="checkbox" name="nm_hobby" value="golf" onclick="f_ck(5)"><br><br>
    <script>
        var v_ckboxs = document.getElementsByName("nm_hobby");
        function f_ck(p_index){
            if(f_ckCnt()>3){
                alert("3개만 하라고");
                v_ckboxs[p_index].checked = false; // 강제로 체크 풀어줘
            }
        }
        function f_ckCnt(){
            var v_cnt = 0;
            for(var i=0;i<v_ckboxs.length;i++){
                if(v_ckboxs[i].checked){
                    v_cnt++;
                }
            }
            return v_cnt;
        }
    </script>
</body>

2) this이용

<body>
    당신의 취미?(3개까지만)<br>
    독서<input type="checkbox" name="nm_hobby" value="reading" onclick="f_ck(this)">
    영화<input type="checkbox" name="nm_hobby" value="movie" onclick="f_ck(this)">
    음악<input type="checkbox" name="nm_hobby" value="music" onclick="f_ck(this)"><br>
    낚시<input type="checkbox" name="nm_hobby" value="fishing" onclick="f_ck(this)">
    게임<input type="checkbox" name="nm_hobby" value="game" onclick="f_ck(this)">
    골프<input type="checkbox" name="nm_hobby" value="golf" onclick="f_ck(this)"><br><br>
    <script>
        var v_ckboxs = document.getElementsByName("nm_hobby");
        function f_ck(p_index){
            if(f_ckCnt()>3){
                alert("3개만 하라고");
                //v_ckboxs[this].checked = false; // 강제로 체크 풀어줘
                p_index.checked=false;
            }
        }
        function f_ckCnt(){
            var v_cnt = 0;
            for(var i=0;i<v_ckboxs.length;i++){
                if(v_ckboxs[i].checked){
                    v_cnt++;
                }
            }
            return v_cnt;
        }
    </script>
</body>

 

>> 카운트 함수 사용하지 않고(성능우수)

1)  체크되면 +1, 해제되면 -1

    <script>
        var v_ckboxs = document.getElementsByName("nm_hobby");
        var v_ckCnt = 0; // 최초에 체크된 체크박스 개수
        function f_ck(p_this) {
            if (p_this.checked) {
                v_ckCnt++;
                alert(v_ckCnt);
            } else {
                v_ckCnt--;
                alert(v_ckCnt);
            }
        }
    </script>

2) 어디까지 가능한지 limit 주기

    <script>
        var v_ckboxs = document.getElementsByName("nm_hobby");
        var v_ckCnt = 0; // 최초에 체크된 체크박스 개수
        var v_limitCnt = 3;
        function f_ck(p_this) {
            if (p_this.checked) {
                v_ckCnt++;
            } else {
                v_ckCnt--;
            }
            if(v_ckCnt>v_limitCnt){
                alert(v_limitCnt+"까지만 가능해");
            }
        }
    </script>

3) 체크된 속성에 강제로 false주기

    <script>
        var v_ckboxs = document.getElementsByName("nm_hobby");
        var v_ckCnt = 0; // 최초에 체크된 체크박스 개수
        var v_limitCnt = 3;
        function f_ck(p_this) {
            if (p_this.checked) {
                v_ckCnt++;
            } else {
                v_ckCnt--;
            }
            if(v_ckCnt>v_limitCnt){
                alert(v_limitCnt+"까지만 가능해");
                p_this.checked=false;
            }
        }
    </script>

4) false시켰을 때 카운트값 하나 -1

    <script>
        var v_ckboxs = document.getElementsByName("nm_hobby");
        var v_ckCnt = 0; // 최초에 체크된 체크박스 개수
        var v_limitCnt = 3;
        function f_ck(p_this) {
            if (p_this.checked) {
                v_ckCnt++;
            } else {
                v_ckCnt--;
            }
            if(v_ckCnt>v_limitCnt){
                alert(v_limitCnt+"까지만 가능해");
                p_this.checked=false;
                v_ckCnt--;
            }
        }
    </script>

 

'화면구현 > HTML' 카테고리의 다른 글

콤보박스  (0) 2020.06.22
HTML 테이블로 구구단 출력  (0) 2020.06.19
HTML 버튼과 텍스트와 복사와참조  (0) 2020.06.19
HTML 함수  (0) 2020.06.19
innerHTML  (0) 2020.06.18

'화면구현/HTML'의 다른글

  • 현재글HTML 라디오버튼과 체크박스

관련글

댓글

티스토리툴바