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

Question

I have 10 check-boxes. When user selects the first check-box then a label appears "a)." beside it. On the selection of a second check-box, this label changes to "b)." if it is placed lower in the ordering of the check-box's compared to the new selection, and the new check-box gets the labeling "a)." and vice versa.

I have found a way to do this by using binary approach, where I check if 1st, 2nd is selected then 3rd is "c)." if not then "b)." or "a)." but this logic becomes too large and inefficient when a large no. of check-boxes come in.

Can some one help me find a better logic?

Here is a sample code

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

The algorithmus of your code can be replaced by:

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

I'm not sure what you really meant, as I understood, newest checked checkbox is 'a', next newest is 'b', ....

If my understanding is correct, you may try this:

 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>