Html & Script

select, checkbox, radio 선택하기 등등..

페이지 정보

본문

----------------------------------------------------------

<script>
//필드선택
function setFiled(obj, str) {
        var sect=(setFiled.arguments[2])? setFiled.arguments[2] : ''; //구분자
        var str_arr = new Array();
        if (sect) str_arr = str.split(sect);
        else str_arr[0] = str;

        var str_len=str_arr.length;
        var obj_len=(typeof(obj.length) == 'undefined') ? 1 : obj.length;
        var obj_type=(typeof(obj.type) == 'undefined')? obj[0].type : obj.type;

        var opt=''; // 선택
        switch(obj_type)
        {
                case 'select-one': case 'select-multiple' : opt='selected'; break;
                case 'checkbox' : case 'radio' : opt='checked'; break;
        }

        if (obj_len > 1) {
                for (var i=0; i < str_len; i++) {
                        for (var j=0; j < obj_len; j++) {
                                if (obj[j].value == str_arr[i]) {
                                        eval("obj["+j+"]."+opt+"=true");
                                        break;
                                }
                        }
                }
        }else{
                if (obj.value == str) eval("obj."+opt+"=true");
        }
}
//선택값 가져오기
function getFiled(obj) {
        var arr=(typeof(obj.length) == 'undefined')? '' : new Array();
        var obj_len=(typeof(obj.length) == 'undefined') ? 1 : obj.length;
        var obj_type=(typeof(obj.type) == 'undefined')? obj[0].type : obj.type;
        var opt=''; // 선택
        switch(obj_type)
        {
                case 'select-one': case 'select-multiple' : opt='selected'; break;
                case 'checkbox' : case 'radio' : opt='checked'; break;
        }

        if (obj_len > 1) {
                for (var i=0; i < obj_len; i++) {
                        if (eval("obj["+i+"]."+opt))
                        {
                                if (obj_type == 'select-one' || obj_type == 'radio')
                                {
                                        return obj[i].value;
                                }else{
                                        arr[i]=obj[i].value;
                                }
                        }else arr[i]='';
                }
                return arr;
        }else{
                if (obj_type == 'checkbox' || obj_type == 'radio') {
                        if (eval("obj."+opt)) return obj.value;
                }else{
                        if (eval("obj.options[0]."+opt)) return obj.value;
                }
        }
        return '';
}

//선택된 갯수 가져오기
function countFiled(obj) {
        var count=0;
        var obj_len=(typeof(obj.length) == 'undefined') ? 1 : obj.length;
        var obj_type=(typeof(obj.type) == 'undefined')? obj[0].type : obj.type;
        var opt=''; // 선택
        switch(obj_type)
        {
                case 'select-one': case 'select-multiple' : opt='selected'; break;
                case 'checkbox' : case 'radio' : opt='checked'; break;
        }

        if (obj_len > 1) {
                for (var i=0; i < obj_len; i++) {
                        if (obj_type == 'select-one')
                        {
                                if (eval("obj.options["+i+"]."+opt)) count++;
                        }else{
                                if (eval("obj["+i+"]."+opt)) count++;
                        }
                }
        }else{       
                if (obj_type == 'checkbox' || obj_type == 'radio') {
                        if (eval("obj."+opt)) count++;
                }else{
                        if (eval("obj.options[0]."+opt)) count++;
                }
        }
        return count;
}

// 체크상태변화 (rev:반전,true=전체선책,false=전체해제)
function checkFiled(obj,flag) {
        var obj_len=(typeof(obj.length) == 'undefined') ? 1 : obj.length;
        var obj_type=(typeof(obj.type) == 'undefined')? obj[0].type : obj.type;
        var opt=''; // 선택
        switch(obj_type)
        {
                case 'select-one': case 'select-multiple' : opt='selected'; break;
                case 'checkbox' : case 'radio' : opt='checked'; break;
        }
        if (obj_len > 1) {
                for (var i=0; i < obj_len; i++) {
               
                        if (obj_type == 'select-one' || obj_type=='radio' ) {
                                return;
                        }else if (obj_type == 'checkbox') {
                                if (flag == 'rev') {
                                        if (eval("obj["+i+"]."+opt) ) eval("obj["+i+"]."+opt+"=false");
                                        else eval("obj["+i+"]."+opt+"=true");
                                }else {
                                        eval("obj["+i+"]."+opt+"="+flag);
                                }
                        }else{
                                if (flag == 'rev') {
                                        if (eval("obj.options["+i+"]."+opt) ) eval("obj.options["+i+"]."+opt+"=false");
                                        else eval("obj.options["+i+"]."+opt+"=true");
                                }else {
                                        eval("obj.options["+i+"]."+opt+"="+flag);
                                }
                        }
                }
        }else{
                if (obj_type == 'select-one' || obj_type=='radio' ) {
                        return;
                }else if (obj_type == 'checkbox') {
                        if (flag == 'rev') {
                                if (eval("obj."+opt) ) eval("obj."+opt+"=false");
                                else eval("obj."+opt+"=true");
                        }else {
                                eval("obj."+opt+"="+flag);
                        }
                }else{
                        if (flag == 'rev') {
                                if (eval("obj.options[0]."+opt) ) eval("obj.options[0]."+opt+"=false");
                                else eval("obj.options[0]."+opt+"=true");
                        }else {
                                eval("obj.options[0]."+opt+"="+flag);
                        }
                }
        }
}

</script>
<form name='form'>
<input type='checkbox' name='checkbox[]' value='1'><input type='checkbox' name='checkbox[]' value='2'><input type='checkbox' name='checkbox[]' value='3'><BR>
<input type='checkbox' name='checkbox' value='1'><BR>
<input type='radio' name='radio' value='1'><input type='radio' name='radio' value='2'><input type='radio' name='radio' value='3'><BR>
<select name='select'><option value='1'>1</option><option value='2'>2</option><option value='3'>3</option> </select>
<select name='select_mult' multiple><option value='1'>1</option><option value='2'>2</option><option value='3'>3</option></select>
</form>
<script>
function aa()
{
        setFiled(form.elements['checkbox[]'],'1,3',',');
        setFiled(form.elements['checkbox'],'1');
        setFiled(form.elements['radio'],'2');
        setFiled(form.elements['select'],'2');
        setFiled(form.elements['select_mult'],'1,3',',');
}
function bb()
{
        alert("checkbox[] ==>"+getFiled(form.elements['checkbox[]']));
        alert("checkbox ==>"+getFiled(form.elements['checkbox']));
        alert("radio ==>"+getFiled(form.elements['radio']));
        alert("select ==>"+getFiled(form.elements['select']));
        alert("select_mult ==>"+getFiled(form.elements['select_mult']));
}
function cc()
{
        alert("checkbox[] ==>"+countFiled(form.elements['checkbox[]']));
        alert("checkbox ==>"+countFiled(form.elements['checkbox']));
        alert("radio ==>"+countFiled(form.elements['radio']));
        alert("select ==>"+countFiled(form.elements['select']));
        alert("select_mult ==>"+countFiled(form.elements['select_mult']));
}
function dd()
{
        checkFiled(form.elements['checkbox[]'],'rev');
        checkFiled(form.elements['checkbox'],'rev');
        checkFiled(form.elements['radio'],'rev');
        checkFiled(form.elements['select'],'rev');
        checkFiled(form.elements['select_mult'],'rev');
}

</script>
<a href='#' onclick='aa()'>선택하기</a>
<a href='#' onclick='bb()'>선택값 가져오기</a>
<a href='#' onclick='cc()'>선택갯수 가져오기</a>
<a href='#' onclick='dd()'>선택 반전하기</a>

관련자료

등록된 댓글이 없습니다.
Today's proverb
“무릇 물이란 지세를 따라 흐르되 작은 틈도 놓치지 않고 적시니 지혜를 갖춘 자와 같고, 움직이면서 아래로 흘러가니 예를 갖춘 자와 같으며, 어떤 깊은 곳도 머뭇거리지 않고 들어가니 용기를 가진 자와 같고 장애물이 막혀서 갇히면 고요히 맑아지니 천명을 아는 자와 같으며, 험한 곳을 거쳐 멀리 흐르지만 끝내 남을 허물어뜨리는 법이 없으니 덕을 가진 자와 같다. 천지는 이것으로 이루어지고, 만물은 이것으로 살아가며, 나라는 이것으로 안녕을 얻고, 만사는 이것으로 평안해지며, 만물은 이것으로 바르게 되는 것이다. 이것이 지혜로운 자가 물을 좋아하는 이유이다.” (한영, <<한시외전>>)