jQuery-选中/单击时将输入或按钮值追加/删除到列表中

我想

将
span
添加到列表中，如果它是选定的
输入
，但是
用下一个选定的输入替换它，如果没有，则完全
删除它

我试图分配一个唯一的
id
标记来告诉选择所属的输入组，以便它只替换/删除该组中的标记：

var sort_key = "sort-" + span;

然后使用append And remove以该组中的标记为目标：

  if ($(this).is(":checked")) {
  $keys.append("<span id='" + sort_key + "'>" + span + "</span>"); // Append the div from out of the loop
} else {
  if ($keys.has("#" + sort_key)) {
    $("#" + sort_key).remove();
  }
}

。选择{
显示器：flex；
阿尔金项目：中心；
高度：40px；
}
.选择范围{
填充：9px；
最小高度：20px；
边界半径：6px；
背景：蓝色
}

选择如下：
向上的
向下
侧着
食物
喝
小吃
动物
形状
颜色
无法100%确定运营目标是什么，因此以下是我理解的运营目标的概要：

三组输入，每一组具有不同的
[类型]


每个组都放在自己的
中
每个输入都分配了一个类，该类指示它所属的组


.rad
用于单选按钮
复选框的
.chk
按钮的
.btn

标记现在是
，以促进连贯的收集过程

选择输入时，上面会出现一个带有输入值的标记，其他标记将被删除这里还不清楚。。。究竟删除了什么？


是否仅删除了该特定组中的标记
是否删除了所有标记，而不考虑组
当前正在修改的组的标记是否仅在处于非活动状态时才被删除


所以我决定实施#3，因为它是最有用的
添加了一个
并在其中嵌套了三个
s
。每一篇文章都被分配了一个与组相对应的类：
.rads
，
.chks
，
.btns

详细信息将在演示中进行注释


$（函数（）{
//如果单击了任何。。。
$（'input'）。在（'click'，函数（e）上{
//将output.tag的htmlString存储在变量中
var标记=``；
/*
如果输入.rad。。。
Clear article.rads
将.tag及其值附加到.rads
*/
如果（$（this）.is（'.rad'））{
$（'.rads'）.empty（）；
$（tag）.appendTo（'.rads'）.val（$（this.val（））；
/*
或者如果它的input.chk。。。
Clear article.chks
在每个被选中的.chk上，添加一个带有
值到.chks
*/
}else if（$（this）.is（'.chk'））{
$（'.chks'）.empty（）；
$（'.chk:checked'）。每个（函数（）{
$（标记）.appendTo（'.chks'）.val（$（this.val（））
});
/*
但是如果它的输入.btn。。。
Remove.active类（如果有），否则添加它
Clear article.btns
在每个button.active上附加一个标记及其值
.基站
*/
}else if（$（this）.is（'.btn'））{
//$（this.toggleClass（'active'）；
$（'.btns'）.empty（）；
//$（'.btn.active'）。每个（函数（）{
$（标记）.appendTo（'.btns'）.val（$（this.val（））
//});
//否则终止函数
}否则{
返回false；
}
});
});
.sel{
显示器：flex；
柔性流：行换行；
证明内容：中心；
高度：40px；
背景：rgba（100100100,1）；
}
.选择标签{
显示：内联块；
填充：9px；
最小高度：20px；
宽度：适合的内容；
边框：1px纯白；
边界半径：6px；
颜色：白色；
}
.rads.tag{
背景：红色；
}
.chks.tag{
背景：绿色；
}
.btns.tag{
背景：蓝色；
}

单选按钮
1.
2.
3.
复选框
4.
5.
6.
按钮
是我一个人，还是更改事件处理程序被复制为彼此的精确副本？它们是。我的最后一个问题是，如果逻辑相同，是否有更好的方法，您只需要组合选择器
$（'selector1，selector2'）
会发现任何元素都与任一选择器相匹配，就像CSS规则选择器的操作方式一样。就是这样，除了按钮的功能应该与收音机相同，在收音机中单击的
是唯一显示的标记。