如何根据用户选择动态更改多个复选框的编号？

Question

我有 10 个复选框。当用户选择第一个复选框时，会出现一个标签“a)”。在它旁边。在选择第二个复选框时，该标签变为“b)”。如果与新选择相比，它在复选框的排序中被放置在较低的位置，并且新复选框将获得标签“a)”。反之亦然。

我找到了一种使用二进制方法来执行此操作的方法，我检查是否选择了第一个、第二个，然后第三个是“c)”。如果不是，那么“b)”。或“a)”。但是这个逻辑在没有大的时候就变得太大而且效率低下。的复选框进来。

谁能帮我找到更好的逻辑？

这是一个示例代码

var a= optionA.header.CheckBox4.rawValue;
 var b= optionB.header.CheckBox4.rawValue;
 var c= optionC.header.CheckBox4.rawValue;
 var d= optionD.header.CheckBox4.rawValue; 
 if(this.rawValue == 1)
 {
    if(a==0 && b==0 && c==0 && d==0)
      optionE.number = "c)";
    else if(a==0 && b==0 && c==0 && d==1)
      optionE.number = "d)";
    else if(a==0 && b==0 && c==1 && d==0)
      optionE.number = "d)";    
    else if(a==0 && b==1 && c==0 && d==0)
      optionE.number = "d)";  
    else if(a==1 && b==0 && c==0 && d==0)
      optionE.number = "d)";  
    else if(a==1 && b==1 && c==0 && d==0)
      optionE.number = "e)";
    else if(a==1 && b==0 && c==1 && d==0)
      optionE.number = "e)";    
    else if(a==1 && b==0 && c==0 && d==1)
      optionE.number = "e)";  
    else if(a==0 && b==1 && c==0 && d==1)
      optionE.number = "e)";  
    else if(a==0 && b==1 && c==1 && d==0)
      optionE.number = "e)";  
    else if(a==0 && b==0 && c==1 && d==1)
      optionE.number = "e)";    
    else if(a==1 && b==1 && c==1 && d==0)
      optionE.number = "f)";    
    else if(a==1 && b==0 && c==1 && d==1)
      optionE.number = "f)";    
    else if(a==1 && b==1 && c==0 && d==1)
      optionE.number = "f)";    
    else if(a==0 && b==1 && c==1 && d==1)
      optionE.number = "f)";    
    else if(a==1 && b==1 && c==1 && d==1)
      optionE.number = "g)";    
 }
 else
 {
    optionE.number = "";    
 } 

Answer 1

您的代码的算法可以替换为：

switch(a+b+c+d) {
case 0: optionE.number = "c)"; break;
case 1: optionE.number = "d)"; break;
case 2: optionE.number = "e)"; break;
case 3: optionE.number = "f)"; break;
case 4: optionE.number = "g)"; break;
}

Answer 2

我不确定您的真正意思，据我了解，最新选中的复选框是“a”，下一个最新的是“b”，....

如果我的理解是正确的，你可以试试这个：

var
cbArr = [],
charArr = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j'];

$(':checkbox').change(function() {
  var $this = $(this);

  if ($this.is(':checked')) { // If checked, add element to end of array
    cbArr.push(this);
  } else {
  	cbArr.splice(cbArr.indexOf(this), 1) // If not checked, remove element
  }

  $(':checkbox ~ label').text('');
  $.each(cbArr, function(i, v) {
    var charIdx = cbArr.length - i - 1; // Get letter index
    $(v).next('label').text(charArr[charIdx]);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" id="cb-1">
<label for="cb-1"></label>
<br>
<input type="checkbox" id="cb-2">
<label for="cb-2"></label>
<br>
<input type="checkbox" id="cb-3">
<label for="cb-3"></label>
<br>
<input type="checkbox" id="cb-4">
<label for="cb-4"></label>
<br>
<input type="checkbox" id="cb-5">
<label for="cb-5"></label>
<br>
<input type="checkbox" id="cb-6">
<label for="cb-6"></label>
<br>
<input type="checkbox" id="cb-7">
<label for="cb-7"></label>
<br>
<input type="checkbox" id="cb-8">
<label for="cb-8"></label>
<br>
<input type="checkbox" id="cb-9">
<label for="cb-9"></label>
<br>
<input type="checkbox" id="cb-10">
<label for="cb-10"></label>
<br>