List of Items with checkbox

Navigation
2

I would like to know how I can complement the code below to work as follows: when marking any item in the checkbox, enter in the case a number indicating the order of its marking with the number appearing in front of the text next to the checkbox so that if I do not dial any item the numbering will auto adjust.

Since I am using hidden field my list does not show in case the order in which the items are being added, it only shows the selected items.

For this reason not to confuse me I would like to know if it is possible to display the numbers at the beginning of the text indicating the order of their markings, below the image of my current list along with the original code.

My listing

Original code 

<html>
  <head>
    <title>Seleção de Itens</title>
    <script type="text/javascript">
var listCheckedOptions = [];

function addToList(checkObj, outputObjID){
  //Remove do array caso o elemento já esteja inserido
  if (listCheckedOptions.indexOf(checkObj.value) >= 0) {
    listCheckedOptions.splice(listCheckedOptions.indexOf(checkObj.value), 1);
  }else{
    if(listCheckedOptions.length >= 2){ 
      alert("Máx 2 Elemenos selecionados");
      checkObj.checked = "";
      return;
    }
    listCheckedOptions.push(checkObj.value);
  }

  document.getElementById(outputObjID).value = ""; //Limpa o textarea
  document.getElementById(outputObjID).value = listCheckedOptions.join('\r\n'); //Adiciona no textarea

  return;
}
    </script>
  </head>
  <body>
    <form name="myform">
<input type="checkbox" name="fruit[]" value="Oranges" onClick="addToList(this, 'txt1')"><font color="#808080">Oranges</font><br>
<input type="checkbox" name="fruit[]" value="Apples"  onClick="addToList(this, 'txt1')"><font color="#808080">Apples</font><br>
<input type="checkbox" name="fruit[]" value="Grapes"  onClick="addToList(this, 'txt1')"><font color="#808080">Grapes</font><br>
<textarea rows="4" cols="10" name="txt1" id="txt1" style="color:#808080"  readonly></textarea>
    </form>
  </body>
</html>
    
asked by anonymous 31.07.2015 / 15:35

1 answer

2

I made some changes to add the functionality you are looking for.

Within font I added a span like this: 

<font color="#808080">Oranges <span></span></font>

This way you can put the number you want.

Then I changed the JavaScript to add elements to the array, not their values. This way it is easier to iterate them and look for the corresponding span via checkObj.nextSibling.querySelector('span')

The code looks like this: 

function addToList(checkObj, outputObjID) {
    //Remove do array caso o elemento já esteja inserido
    if (listCheckedOptions.indexOf(checkObj) >= 0) {
        listCheckedOptions.splice(listCheckedOptions.indexOf(checkObj), 1);
    } else {
        if (listCheckedOptions.length >= 2) {
            alert("Máx 2 Elemenos selecionados");
            return checkObj.checked = false;
        }
        listCheckedOptions.push(checkObj);
    }

    document.getElementById(outputObjID).value = ""; //Limpa o textarea
    document.getElementById(outputObjID).value = listCheckedOptions.map(function (o) {
        return o.value;
    }).join('\r\n'); //Adiciona no textarea
    if (!checkObj.checked) checkObj.nextSibling.querySelector('span').innerHTML = '';
    listCheckedOptions.forEach(function (el, i) {
        var span = el.nextSibling.querySelector('span').innerHTML = i + 1;
    });

    return;
}

jsFiddle: link

    
31.07.2015 / 15:54
How to move a file to another folder in Sublime text? Redirection in CodeIgniter