Javascript JS：链接到Span&；的复选框；背景色

我有两个复选框（见下文），当点击时，激活跨度背景颜色的变化。问题是，我需要它，这样只有一个复选框可以被激活，而另一个被取消激活。我对单选按钮了如指掌，问题是即使单选按钮停用，它也不会删除跨度的背景色。我需要一个解决方案，只允许选择一个，并自动删除背景颜色时，另一个选项被选中

例如：

核心代码：

$(document).ready(function() {

$("span[class='checkbox']").addClass("unchecked");

    $(".checkbox").click(function(){

        if($(this).children("input").attr("checked")){  
            // uncheck
            $(this).children("input").attr("checked", false);
            $(this).removeClass("checked");
            $(this).addClass("unchecked");
        }else{
            // check
            $(this).children("input").attr("checked", true);
            $(this).removeClass("unchecked");
            $(this).addClass("checked");
        }

        //alert($(this).children("input").attr("checked"));
    });

});

---

以下几点应该有效

 $(document).ready(function() {

   // get a list of all the checkboxes
   var $checkboxEls = $('input[type="checkbox"]');

   $(document).on('change', 'input[type="checkbox"]', function(event) {

     // highlight this check box
     $(this).parent('span').addClass('checked');

     // remove other classes
     $checkboxEls.not(this).removeAttr('checked').parent('span').removeClass('checked');

   });
 });

---

它利用从先前存储的复选框列表中删除当前复选框

是否可以将其调整为仅取消激活具有相同名称属性的复选框？您不应该让表单元素具有相同的名称，因为html中最后一个元素的值将覆盖以前的值。