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

最新推荐文章于 2023-06-03 07:44:22 发布

weixin_33937913

最新推荐文章于 2023-06-03 07:44:22 发布

阅读量282

点赞数

文章标签： javascript python ViewUI

原文链接：https://my.oschina.net/u/2480675/blog/529726

版权

2019独角兽企业重金招聘Python工程师标准>>>

效果实现共需三个文件：

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

转载于:https://my.oschina.net/u/2480675/blog/529726