Javascript
[jQuery] radio, checkbox 디자인 하기
- 2022.04.17 13:07:35
radio나 checkbox 인풋 디자인은 여간 까다로운게 아니다. 아래 예제는 radio, checkbox 를 감싸고 있는 label에 Class를 부여하여 보다 간단한 방법으로 인풋 디자인이 가능하게 해준다. [!]jQuery[/!] //checkbox, radio design
labelDesign = { 'init' : function(){ this.action(); }, 'action' : function(){ var ele = { 'inp' : 'label.chk :checkbox, label.chk :radio' } var is_checked = function($this){ var chked = $this.is(':checked'); var this_type = $this.attr('type'); if(chked){ if(this_type=='radio'){ $this.parents('label').addClass('on').siblings($this.parent()).removeClass('on'); }else{ $this.parents('label').addClass('on'); } }else{ $this.parents('label').removeClass('on'); } } $(document).on('click change', ele.inp, function() { is_checked($(this)); }); $(window).on({ 'load' : function(){ $(ele.inp).each(function(){ is_checked($(this)); }) } }); } } [!]HTML[/!] <label class="chk"><input type="checkbox" /></label>
|