라디오 버튼 제이쿼리

출처 :

https://codepen.io/jaehee/pen/PZKeRy

 

 

<style>
body {margin: 30px;}
body * { margin: 0; padding: 0;}
a {text-decoration: none;}
ul {list-style: none}
li.selected  { width: 500px; background-color: #ddd;}

</style>

<h1>First UL</h1>
<ul id="uldata">
    <li id="lidata"><a href="#none">Lorem ipsum dolor sit amet.</a></li>
    <li id="lidata"><a href="#none">Lorem ipsum dolor sit amet. Lorem ipsum dolor.</a></li>
    <li id="lidata"><a href="#none">Lorem ipsum dolor sit amet.</a></li>
    <li id="lidata"><a href="#none">Lorem ipsum dolor sit amet. Lorem ipsum dolor.</a></li>
</ul>
<br/>
<br/>

 

 

 

<script type="text/javascript">
(function(global, $){
    'use strict';

    var plugin = 'radioClass';
    $.fn[plugin] = $.fn[plugin] || function(className, context) {

            context = context || '';
            var _this = context ? this.closest(context) : this;
            _this.addClass(className);

            var $siblings = _this.siblings();
            $.each($siblings, function(index, item) {
                var _$sibling = $siblings.eq(index);
                if ( _$sibling.hasClass(className) ) {
                    _$sibling.removeClass(className);
                }
            });
            // jQuery 체이닝을 위한 this 반환 설정
            return this;

        }; // 끝: $.fn.radioClass

})(window, window.jQuery);

$(function () {
 console.log($(this.$ul));
    // 접근성을 위해 a 를 클릭하도록 합니다. (탭 포커스 이동시를 고려)
    var $ul = $('ul#uldata');
    $ul.on('click','li#lidata a', function (e) {

        e.preventDefault();
        // a 에 selected 가 되지 않도록 radioClass context 를 li 로 설정
        $(this).radioClass('selected', 'li');
    })
});
</script>