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>

관련자료

댓글 0
등록된 댓글이 없습니다.
Today's proverb
천재는 칭송을 받는다. 부자는 부러움을 산다. 권세를 누리는 사람은 존경을 받는다. 그러나 오직 덕성을 지닌 사람만이 신뢰를 받는다.