Listing Items with checkbox

Asked

Viewed 515 times

2

I would like to know how I can complement the code below to work as follows I need that when marking any item in the checkbox put in the case a number indicating the order of its marking with the number appearing in front of the text that is next to the checkbox in case I check any item the numbering fits auto.

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

For this reason not to confuse me would like to know if it is possible to make appear the numbers at the beginning of the text indicating the order of their markings, follows 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>
javascript html

1 answer

2


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

Within the font added a span thus: 

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

that way you have where to put the number you want.

Then I switched Javascript to add elements to the array, not its values. This makes it easier to insert them and search for the span corresponding route checkObj.nextSibling.querySelector('span')

The code would look 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: http://jsfiddle.net/dsy0amLf/

  • 1

    Thank you so much for your help.

Browser other questions tagged javascript html

You are not signed in. Login or sign up in order to post.