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

【问题标题】：Remove class on click and deselect input with JQuery单击删除类并使用 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

标签： javascript jquery html

【解决方案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/

【讨论】：