仅选择一个复选框并为选中的输入添加类答案

【问题标题】：select only one checkbox and add class for the checked input仅选择一个复选框并为选中的输入添加类
【发布时间】：2013-12-01 03:28:20
【问题描述】：

我有一个复选框列表，想要选择唯一一个复选框并添加复选框输入的类并选择另一个复选框从现有复选框中删除该类

 $('input.myclass').click(function () 
  {
        var id =  $(this).attr('id').replace('image-','');
        $('input.myclass:checked').not(this).removeAttr('checked');

        var sFilter = "";
        $('input.myclass[type=checkbox]').each(function () {
            sFilter = sFilter + (this.checked ? $(this).val() : "");
        });
    check();    
    });

    function check(){
    var a = $('input:checkbox[name=cover_image]:checked').val();
    alert(a);
    }

如果该复选框未选中，我只想为选中的复选框选择一个复选框和类，然后删除该类

【问题讨论】：

既然只想选择一个，那单选按钮不是更合适吗？
如果该复选框未选中，我只想为选中的复选框选择一个复选框和类，然后删除该类
用户期望不同类型的输入有特定的行为。如果您只想允许一个选择，您应该使用radio 按钮。覆盖复选框的预期和默认行为只会让您的用户感到困惑和沮丧。
只需使用 CSS，无需脚本。

标签： javascript jquery checkbox

【解决方案1】：

如果您出于某种原因真的想使用复选框（而不是单选按钮），请执行以下操作：

$('input:checkbox').on('click', function () {
    $('input.selected').removeClass('selected').prop('checked', false);
    $('input:checked').addClass('selected');
});

编辑：删除属性有效，但属性操作是一种更好的方法（如 RobG 所建议的）

【讨论】：

添加和删除选中的属性不会选中或取消选中复选框，它设置默认情况下是否选中复选框（至少在区分属性和属性的jQuery版本中是这样）。
@RobG 我正在使用带有 Chrome V32 的 jQuery 1.10.2，当我执行 removeAttr('checked') 时，它取消选中该框。它甚至使用 attr('checked', true) 来检查框。唯一奇怪的是，一旦您使用 removeAttr 取消选中它，它就不会选中带有该代码的框

【解决方案2】：

您可以使用on() 来监听复选框组的变化。

var $checkBoxes = $(":checkbox").on("change", function () { // Here listening the changes on checkbox using on()
  $checkBoxes.removeClass("change").attr("checked", false); // remove the class from existing Checkbox
  $(this).addClass("change").attr("checked", true); // adding the class for the currenly checked checkbox
});

工作FIDDLE 在这里

【讨论】：

【解决方案3】：

出于您的目的，首先从所有复选框中删除类并取消选中它们，然后将类添加到单击的复选框并检查如下

$("input[type='checkbox']").on('click', function () {
    $("input[type='checkbox']").removeClass('selected').attr('checked', false);
    $(this).addClass('selected').attr('checked', true);
});

检查此Fiddle 以了解您的问题

【讨论】：