jquery在单选按钮上删除类

时间:2014-08-28 18:57:24

标签: jquery class radio-button

我在尝试从分组单选按钮中删除类时遇到问题。我有两组单选按钮。我想删除同一组中所有单选按钮检查的类。

我的问题是从所有单选按钮或从零开始删除类。 在这里你可以看到

http://jsfiddle.net/Tabes/awt158ep/9/

我试过了:

$this.parent().siblings('label')
    .find('.panel_radio').removeClass('checked');

还有:

$this.parent().siblings('label')
    .find('input:radio[name=' + $this.attr('name') + ']').removeClass('checked');

但他们都没有工作

(function($){
$.fn.meRadioCheck = function() {
    return this.each(function() {

        var $this = $(this);
        var $span = $('<span/>');

        $span.addClass('panel_'+ ($this.is(':checkbox') ? 'check' : 'radio'));
        $this.is(':checked') && $span.addClass('checked'); // init
        $span.insertAfter($this);

        $this.parent('label').addClass('panel_label')
        .attr('onclick', ''); // Fix clicking label in iOS
        // hide by shifting left
        $this.css({ position: 'absolute', left: '-9999px' });


        // Events
        $this.on({
            change: function() {
                $('input:radio[name=' + $this.attr('name') + ']').parent().removeClass('active');

                if ($this.is(':radio')) {
                    $this.parent().siblings('label')
                    .find('.panel_radio').removeClass('checked');
                }
                $span.toggleClass('checked', $this.is(':checked'));
                $this.parent().toggleClass('active', $this.is(':checked'));
            },
            focus: function() { $span.addClass('focus'); },
            blur: function() { $span.removeClass('focus'); }
        });
    });
};
})(jQuery);

1 个答案:

答案 0 :(得分:1)

我在span元素中添加了相同的name属性:

var $this = $(this);
var $span = $('<span/>');
var name = $this.attr("name");   
$span.addClass('panel_'+ ($this.is(':checkbox') ? 'check' : 'radio'))
     .attr("name", name);

然后,您可以使用该name属性从.panel_radio元素中删除已检查的类:

if ($this.is(':radio')) {                    
    $this.parent().siblings('label')
                  .find('.panel_radio[name="'+ name +'"]')
                  .removeClass('checked');
}

尝试fiddle here