JSFiddle - React, Tailwind, and code Playground

by seong gyun jeon

HTML

<label>test1<input type="checkbox" id="checkbox1" name="checkbox1" /></label>
<label>test2<input type="checkbox" id="checkbox2" name="checkbox2" /></label>
<label>test3<input type="checkbox" id="checkbox3" name="checkbox3" /></label>
<label>test4<input type="checkbox" id="checkbox4" name="checkbox4" /></label>
<br><br>
<a href="#" id="tcheckbox1" name="tcheckbox1">checkbox1_toggle</a><br>
<a href="#" id="tcheckbox2" name="tcheckbox2">checkbox2_toggle</a><br>
<a href="#" id="tcheckbox3" name="tcheckbox3">checkbox3_toggle</a><br>
<a href="#" id="tcheckbox4" name="tcheckbox4">checkbox4_toggle</a><br>
<br><br>
<a href="#" id="checker" name="checker">checkerEvent</a><br>
<a href="#" id="reset" name="reset">resetEvent</a><br>

JavaScript

// MV 패턴
var Model = (function () {


   var model = function () {

       return new init();
   };

   function init() {

       this.listeners = {};

       return this;
   };

   // 리스너 집합을 통해 현재 View 영역의 상태를 관리한다.
   init.prototype.addListener = function (listenerId, checked) {

       listenerId = listenerId || '';
       checked = checked || false;

       this.listeners[listenerId] = {
            'elem': document.getElementById(listenerId),
            'checked': checked
       };

       return this;
   };

   init.prototype.removeListener = function (listenerId) {
        
       listenerId = listenerId || '';

       delete this.listeners[listenerId];

       return this;
   };

   init.prototype.isListener = function (listenerId) {
        
       listenerId = listenerId || '';

       return this.listeners[listenerId];
   };   

   // 현재 View 영역의 상태를 정의한다.
   init.prototype.setChecked = function (listenerId, checked) {

       listenerId = listenerId || '';
       checked = checked || false;

       this.listeners[listenerId].checked = checked;

       return this.listeners;
   };

   // 현재 View 영역의 상태를 반환한다.
   init.prototype.getChecked = function(listenerId){

        listenerId = listenerId || '';
        var elem = this.listeners[listenerId].elem;

        return elem.checked || false;
   };

   return model;

} ());


var View = (function () {


   var view = function (model, id, checked) {

       return new init(model, id, checked);
   }

   function init(model, id, checked) {

       this.id = id;
       this.elem = document.getElementById(this.id);

       this.model = model;
       this.model.addListener(this.id, checked);

       if (this.elem){

           this.elem.checked = checked;
           this.model.setChecked(this.id, checked);
       }

       return this;
   }

   // View 영역의 현재 상태를 Model 영역에 적용 시킨다.
   init.prototype.toogle = function () {

       if (this.elem){
           if (this.elem.checked) this.elem.checked = false;
    ...