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

Question

嗨，大家都在试着按checkbox: checked顺序排序一个数字。

<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”条件来计数选中列表来获得一个值。

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

请注意小提琴现在的问题是，我想谈判的价值，如果我取消检查的列表。不检查

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为2，顺便说一句。

我被困在这里，而不检查是完全疯了，给出一些想法。

Answer 1

不知道你是什么意思，但我觉得有点像.

$(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。如果理解正确就让我知道？

Answer 2

最简单的方法是迭代所有复选框，并在更改一个复选框时重新分配批处理值。例如，这可以通过$.each方法来完成。检查下面的片段：

​

$(function () {
	$('.badges').hide();
	
	$('.rule').on('change', function() {
        var count = 0;
        $.each($('.rule'), function(i, val) {
            if(this.checked) {
                count ++;
                $(this).next('.badges').show().text(count);  
            }
            else
            {
                $(this).next('.badges').hide();
            }
        });
	});
});

	.box {
			padding:10px;
			border:1px solid #ccc;
			width:250px;
		}
		.box .label_select {
			display:block;
			height:25px;
			line-height:25px;
			cursor:pointer;
			margin-bottom:2px;
			font-size:13px;
		}
		.box .label_select:after {
			clear:both;
			content: " ";
			display:block;
		}
		.badges {
			float:right;
			display:inline-block;
			background-color:#666;
			border-radius:50%;
			padding: 0px 5px;
			min-width:10px;
			text-align:center;
			position:relative;
			top:-2px;
		}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<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>

​

Answer 3

所以当你取消检查时，我保存未检查的徽章的当前值并隐藏它。然后，我得到所有可见的徽章，如果它们>1和>未检查的值，则从每个标记中减去1。

​

$(function () {
    $('.badges').hide();
    var count = 0;
    $('.rule').on('change', function () {
        var $currentBadge = $(this).next('.badges');
        if (this.checked) {
            count++;
            $currentBadge.show().text(count);
        } else if (!this.checked) {
            count--;
            var thisVal = parseInt($currentBadge.text(),10);
            $currentBadge.hide().text("");

            $(".badges:visible").each(function () {
                var val = parseInt($(this).text(),10);
                if (val != 1 && val > thisVal) $(this).text(val- 1);
            });
            var reduce = parseInt($(this).parent().closest('.box').find('[type=checkbox]:checked').next('.badges').text());

        }
    })
})

.box {
	    padding:10px;
	    border:1px solid #ccc;
	    width:250px;
	}
	.box .label_select {
	    display:block;
	    height:25px;
	    line-height:25px;
	    cursor:pointer;
	    margin-bottom:2px;
	    font-size:13px;
	}
	.box .label_select:after {
	    clear:both;
	    content:" ";
	    display:block;
	}
	.badges {
	    float:right;
	    display:inline-block;
	    background-color:#ccc;
	    border-radius:50%;
	    padding: 0px 5px;
	    min-width:10px;
	    text-align:center;
	    position:relative;
	    top:-2px;
	}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<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>

​