html javascript radio handler 예제

html javascript radio handler 예제

2017-11-07

썩 좋은 예제는 아님...

전역 namespace 선언하고 

엘레먼트 구분하고 

사용할 엘레먼트 별 이벤트 만들어 넣고

핸들러 영역 구분하고

사용할 핸들러 만들어 넣음. 끝..

jquery 코드 부분은 DOM 기본 셀렉터로 바꾸는게 더 좋다고 생각하지만 귀찮으니까 이 정도로 정리..

멜론 티켓 때 코드를 안 옮겨 놔서 한 번 써봄...

toggle, on 등에 각각 shield 패턴이 들어가야 제대로 된 형태라고 볼 수 있을듯...

setProp 도 역시 jQuery 랩핑이라 그냥 그럼.... .prop 대신 쓸 수 있게 만들면 좋을듯..

var dom = {};

dom.ele = {};

dom.ele.radio = {};

dom.handler = {};

dom.handler.setProp = function(eleId,prop,value){

  $dom[eleId].prop(prop,value);

  //document.getElementById(eleId)[prop] = value;

};

dom.handler.toggle = function(eleId,prop){

    //var value = $dom[eleId].prop(prop) ? false : true;

    var value = document.getElementById(eleId)[prop] ? false : true;

    dom.handler.setProp(eleId,prop,value);

};

dom.ele.radio.toggle = function(eleId){

    var prop = 'checked';

    dom.handler.toggle(eleId,prop);

};

dom.ele.radio.on = function(eleId){

    var prop = 'checked';

    dom.handler.setProp(eleId,prop,true);

};

var $dom = {};

$dom.clazz = {};

var initDom = function() {

  $dom.btn_sms_y = $('#btn_sms_y');

  $dom.btn_sms_n = $('#btn_sms_n');

  $dom.btn_email_y = $('#btn_email_y');

  $dom.btn_email_n = $('#btn_email_n');

};

function init_agree(){

       

       var agreeText ="";

       if(smsBool){

              dom.ele.radio.on('btn_sms_y');

              //$('#btn_sms_y').prop( 'checked', true );

       }else{

              dom.ele.radio.on('btn_sms_n');

              //$('#btn_sms_n').prop( 'checked', true );

       }

       if(emailBool){

              dom.ele.radio.on('btn_email_y');

              //$('#btn_email_y').prop( 'checked', true );

       }else{

              dom.ele.radio.on('btn_email_n');

              //$('#btn_email_n').prop( 'checked', true );

       }

}