使用jquery按顺序排序复选框长度列表 [英] Sort checkbox length list in sequtial order using jquery

问题描述

您好，我想尝试以复选框排序一个数字：

Hi all am trying to do sort a number by checkbox: checked in a sequential order.

<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>

我已经通过在Jquery中使用'checked'条件计算检查列表来获得一个值

I already get a value by counting the checked list using 'checked' condition in Jquery

$('.rule').on('change', function() {
        if(this.checked) {
            count ++;
            $(this).next('.badges').show().text(count);
        }
})

请注意 FIDDLE
现在的问题是，如果我取消选中选中的列表，我想要协商该值。
取消选中

Please look out the FIDDLE Now the matter is I want to negotiate the value if I uncheck the checked list. for uncheck

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。

For example there are four list. I selected 1, 3 and 5 and the value added in badge as 1st - 1, 3rd - 2 and 5th - 3.

如果我取消选中3表示徽章值的其他列表进入顺序1作为1和5作为2.

if I Unchecked the 3 means the badge value of other list get into sequential order 1 as 1 and 5th as 2.

我选择1,3和5，并且徽章中的值添加为1 - 1，3 - 2和5 - 3.如果我选择第二列表意味着列表的值必须改变第一作为1第二作为2和其他

And I selected 1,3 and 5 and the value added in badge as 1st - 1, 3rd - 2 and 5th - 3.If I selected 2nd list means the values of list has to change 1st as 1 2nd as 2 and by the way others

推荐答案

不确定你的意思，但我认为这是一个...

Not sure what you mean, but i think it's something like ...

$(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();
        });
    })
});

这是一个 jsFiddle 。如果正确理解，请告诉我们吗？

Here's a jsFiddle using that code. Let me know if understood correctly?

这篇关于使用jquery按顺序排序复选框长度列表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！