jquery实现radio按钮在分组状态下点击选中,再次点击取消选中

效果实现共需三个文件:

1、test.html    内容:

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script type="text/javascript" src="./jquery1.8.2.js"></script>
    <script type="text/javascript" src="./radioChecked.js"></script>
</head>
<body>
    <!-- <input type="radio" name="test" value="a" data-check="1">
    <input type="radio" name="test" value="b" data-check="1">

    <HR>
    <input type="radio" name="test1" value="c" data-check="1">
    <input type="radio" name="test1" value="d" data-check="1">
    <input type="radio" name="test1" value="e" data-check="1"> -->
    <input type="radio" name="test" value="a">
    <input type="radio" name="test" value="b">

    <HR>
    <input type="radio" name="test1" value="c">
    <input type="radio" name="test1" value="d">
    <input type="radio" name="test1" value="e">
</body>
<script>

$(function(){
    
    $('.testch').click(function(){
        $(this).radioChecked().init();
    });
    $('.testch').radioChecked().setDataAttr()
});
</script>
</html>

2、radioChecked.js     内容

    ;(function($, window, document, undefined){
    var MyPlugin = function(obj){
        this.$object = obj,
        this.className = this.getClass(),
        this.elementName = this.getElementName()
        //this.options = $.extend({}, this.defaults, opt)
    }

    MyPlugin.prototype = {
        init: function() {
            if(this.$object.data('check') == '1'){
                $(':radio[name="'+ this.elementName +'"]').each(function(){
                    $(this).data('check','1');
                });
                this.$object.data('check','2');
                alert('选中');
            }
            else if(this.$object.data('check') == '2'){
                this.$object.data('check','1');
                this.$object.removeAttr('checked');
                alert('取消选中');
            }
        },
        getClass: function(){
            return this.$object.attr('class');
        },
        getElementName: function(){
            return this.$object.attr('name');
        },
        setDataAttr: function(){
            $('.'+this.className).data('check','1');
        }
    }
    
    $.fn.radioChecked = function(){
        return new MyPlugin(this);
    }
})(jQuery, window, document);

3、jquery1.8.2.js

你可能感兴趣的:(jquery实现radio按钮在分组状态下点击选中,再次点击取消选中)