使用jquery按顺序对复选框长度列表进行排序

嗨，大家好，我正在尝试按

复选框对数字进行排序：按顺序选中

<div class="box sortable">
            <label class="label_select"><input type="checkbox" class="rule" />Rule list <span class="badges"></span></label>
            <label class="label_select"><input type="checkbox" class="rule" />Rule list <span class="badges"></span></label>
            <label class="label_select"><input type="checkbox" class="rule" />Rule list <span class="badges"></span></label>
            <label class="label_select"><input type="checkbox" class="rule" />Rule list <span class="badges"></span></label>
            <label class="label_select"><input type="checkbox" class="rule" />Rule list <span class="badges"></span></label>
            <label class="label_select"><input type="checkbox" class="rule" />Rule list <span class="badges"></span></label>
       </div>

请当心外面
现在的问题是，如果我取消选中选中列表，我想协商值。
取消勾选

if(!this.checked) {
            count --;
            $(this).next('.badges').hide().text(count);
            console.log("count:" +count);
            var reduce= parseInt($(this).parent().closest('.box').find('[type=checkbox]:checked').next('.badges').text());
            reduce = reduce - 1;
            if(!reduce==0) {
                $(this).parent().closest('.box').find('[type=checkbox]:checked').next('.badges').show().empty().text(reduce);
            }
        }

例如，有四个列表。我选择了1、3和5，徽章中的增值分别为1-1、3-2和5-3

如果我未选中3，则表示其他列表的徽章值按顺序1为1，第5为2

我选择了1,3和5，在徽章中添加的值为1-1、3-2和5-3。如果我选择了第2个列表，则表示列表的值必须更改为1，2，以及其他

取消选中时我一直停留在这里，我完全不想给出一些想法。
最简单的方法是在更改一个复选框时，遍历所有复选框并重新分配批处理值。例如，这可以通过方法来实现。检查下面的代码段：


$（函数（）{
$（'.badges'）.hide（）；
$（'.rule'）。在（'change'，function（）上{
var计数=0；
$.each（$（'.rule'），函数（i，val）{
如果（选中此项）{
计数++；
$（this）.next（'.badges'）.show（）.text（count）；
}
其他的
{
$（this.next（'.badges'）.hide（）；
}
});
});
});
.box{
填充：10px；
边框：1px实心#ccc；
宽度：250px；
}
.box.label\u选择{
显示：块；
高度：25px；
线高：25px；
光标：指针；
边缘底部：2px；
字体大小：13px；
}
.box.label\u选择：之后{
明确：两者皆有；
内容：“；
显示：块；
}
.徽章{
浮动：对；
显示：内联块；
背景色：#666；
边界半径：50%；
填充：0px 5px；
最小宽度：10px；
文本对齐：居中；
位置：相对位置；
顶部：-2px；
}

规则列表
规则列表
规则列表
规则列表
规则列表
规则列表
因此，当您取消选中时，我会保存未选中徽章的当前值并将其隐藏。
然后我会得到所有可见的徽章，如果它们大于1且大于未检查的值，我会从每个徽章中减去1


$（函数（）{
$（'.badges'）.hide（）；
var计数=0；
$（'.rule'）。在（'change'，函数（）{
var$currentBadge=$（this.next（'.badges'）；
如果（选中此项）{
计数++；
$currentBadge.show（）.text（计数）；
}否则如果（！this.checked）{
计数--；
var thisVal=parseInt（$currentBadge.text（），10）；
$currentBadge.hide（）.text（“”）；
$（“.徽章：可见”）。每个（函数（）{
var val=parseInt（$（this）.text（），10）；
如果（val！=1&&val>thisVal）$（this）.text（val-1）；
});
var reduce=parseInt（$（this）.parent（）.closest（'.box'）.find（'[type=checkbox]：checked'）.next（'.badges'）.text（））；
}
})
})
.box{
填充：10px；
边框：1px实心#ccc；
宽度：250px；
}
.box.label\u选择{
显示：块；
高度：25px；
线高：25px；
光标：指针；
边缘底部：2px；
字体大小：13px；
}
.box.label\u选择：之后{
明确：两者皆有；
内容：“；
显示：块；
}
.徽章{
浮动：对；
显示：内联块；
背景色：#ccc；
边界半径：50%；
填充：0px 5px；
最小宽度：10px；
文本对齐：居中；
位置：相对位置；
顶部：-2px；
}

规则列表
规则列表
规则列表
规则列表
规则列表
规则列表
我不确定你的意思，但我认为这有点像

$(function () {
    $('.badges').hide();
    $('.rule').on('click', function() {
        $('.badges').hide();
        var selected = $('.box [type=checkbox]:checked');
        selected.each(function(i, cb) {
            $(cb).next('.badges').text(i+1).show();
        });
    })
});

下面是一个使用该代码的示例。如果理解正确，请告诉我？
在排序jquery UI@Joseph:making the drop asynchronous帮助中的Dropable事件时，此函数不起作用<代码>删除：函数（ev，ui）{setTimeout（orderRule，10）；}
$(function () {
    $('.badges').hide();
    $('.rule').on('click', function() {
        $('.badges').hide();
        var selected = $('.box [type=checkbox]:checked');
        selected.each(function(i, cb) {
            $(cb).next('.badges').text(i+1).show();
        });
    })
});