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

大家好我想通过checkbox: checked对数字进行排序checkbox: checked按顺序checkbox: checked 。

 
 Rule list  Rule list  Rule list  Rule list  Rule list  Rule list   

我已经通过在Jquery中使用’checked’条件计算检查列表来获取值

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

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

 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以及徽章中添加的值为1st – 1，3rd – 2和5th – 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; } 

  
 Rule list  Rule list  Rule list  Rule list  Rule list  Rule list   

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

  
 Rule list  Rule list  Rule list  Rule list  Rule list  Rule list