单击删除类并使用 JQuery 取消选择输入

Posted 2023-03-11

【中文标题】单击删除类并使用 JQuery 取消选择输入

【英文标题】：Remove class on click and deselect input with JQuery

【发布时间】：2013-03-05 16:35:58

【问题描述】：

我有一个列表项，每个列表项都有一个单选按钮输入，单击列表项时会检查输入。但是，如果再次单击，我想删除该类并取消选择该选项。但是，我似乎什么也做不了。

function setupToptions() 
    if ($('ul.top-options input').length) 
        $('ul.top-options li').each(function() 
            $(this).removeClass('active');
        );
        $('ul.top-options li input:checked').each(function() 
            $(this).parent('li').addClass('active');
        );                
    ;
;

http://jsfiddle.net/BKgdc/4/

怎么了？

【问题讨论】：

那么，您的点击处理程序在哪里？

正如@Jack 所说；这里没有click 处理程序。在上面的示例中，您在哪里“取消选择”您的单选按钮？我相信您在使用单选按钮时应该使用selected 并删除属性selected。您现在使用的 checked 仅适用于复选框

@RobinvanBaalen - 不正确，请看这个小提琴：jsfiddle.net/ZK4th

【参考方案1】：

  $('ul.top-options li input[type=radio]').click(function() 
     if(!$(this).closest('li').hasClass('active'))
         $('ul.top-options li').removeClass('active');
         $(this).closest('li').addClass('active');
     else
         $(this).removeAttr('checked').closest('li').removeClass('active');
);

http://jsfiddle.net/BKgdc/8/

【讨论】：

$('ul.top-options li').removeClass('active'); 实际上与$('ul.top-options li').each(function() $(this).removeClass('active'); ); 相同，但应该更快

另外，那些真的应该是 removeProp 而不是 removeAttr - 它在 1.9+ 中进行了更改，并且“可能”并非在所有情况下都有效，如此处所述：jquery.com/upgrade-guide/1.9/#attr-versus-prop-

我更喜欢用removeAttr，这种情况下不推荐removeProp，阅读官方文档说明“注意：不要使用该方法移除checked、disabled、selected等原生属性。这样会移除属性完全，一旦删除，就不能再次添加到元素。使用 .prop() 将这些属性设置为 false。"

所以，似乎您应该设置 .prop('checked',false) 而不是删除？至少对我来说很有趣:)

【参考方案2】：

您需要有一个事件处理程序：

$('ul.top-options input').change(function()
    if ($('ul.top-options input').length) 
        $('ul.top-options li').each(function() 
            $(this).removeClass('active');
        );
        $('ul.top-options li input:checked').each(function() 
            $(this).parent('li').addClass('active');
        ); 
     
);

但你的代码可以简化为

$('ul.top-options input').change(function()
     $('ul.top-options li').removeClass('active');
     $('ul.top-options li input:checked').parent('li').addClass('active');
);

见demonstration

【参考方案3】：

$(document).ready(function() 

    $li = $('ul.top-options li');
    $li.click(function() 
        if(!$(this).hasClass('active'))
        $li.removeClass('active')
        .filter(this).addClass('active').find('input').prop('checked', true);
         else 
            $(this).removeClass('active');
            $(this).find('input').prop('checked', false);
        
    );
    $li.filter(':has(:checked)').click();

);

【参考方案4】：

您的解决方案是使用复选框而不是单选按钮。使用复选框时不需要任何 javascript。

如果你想取消选择一个单选按钮，你应该删除它的selected 属性。 :checked 仅适用于复选框。

【参考方案5】：

您可能需要这样做：

$li = $('ul.top-options li');
$li.click(function () 
    var self = $(this);
    $li.not(self).removeClass('active');
    (self.hasClass('active') ? (self.removeClass('active').find('input').prop('checked', false)) : (self.addClass('active').find('input').prop('checked', true)));
);
$li.filter(':has(:checked)').click();

替代条件形式：

$li = $('ul.top-options li');
$li.click(function () 
    var self = $(this);
    $li.not(self).removeClass('active');
    if (self.hasClass('active')) 
        self.removeClass('active').find('input').prop('checked', false);
     else 
        self.addClass('active').find('input').prop('checked', true);
    
);
$li.filter(':has(:checked)').click();

实际展示的小提琴：http://jsfiddle.net/ZK4th/