Performing checkbox checkbox with jquery

Question

Performing checkbox checkbox with jquery

Navigation

#1 by (2 votes)

1

I would like to know how I can complement the code below to have how to return values in checkbox mode in the checkbox the problem and that I need this check to be performed as follows keep the array position created at the time of marking the items following the order of the values shown in the same position within the textarea as well as the number that appears next to the marked items showing the positions in which they were selected.

The reason for this is that I have two areas one that sends the values of the checkbox to the database and the other the editing mode that returns the values contained within the database, the problem and how this code generates array position to the items marked when returning the selected values contained within the database this script is not returning the positions of the array of the items in check mode and even placing check values in the checkbox does not insert those values inside the textarea as well as their marking positions created when you have any checked items in the checkbox.

var listCheckedOptions = [];
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;
}

  <form name="myform">
<input type="checkbox" name="fruit[]" value="Oranges" onClick="addToList(this, 'txt1')"><font color="#808080">Oranges <span></span></font>

<br>
<input type="checkbox" name="fruit[]" value="Apples" onClick="addToList(this, 'txt1')"><font color="#808080">Apples <span></span></font>

<br>
<input type="checkbox" name="fruit[]" value="Grapes" onClick="addToList(this, 'txt1')"><font color="#808080">Grapes <span></span></font>

<br>
<textarea rows="4" cols="10" name="txt1" id="txt1" style="color:#808080" readonly></textarea>
</form>

html jquery

asked by anonymous 03.08.2015 / 14:11

1 answer

Is it possible to serialize closures in PHP? [duplicate] Dependent executable files available to the user

score 2 · Accepted Answer

See if the code below is what you want.

var frutas = document.getElementsByName("fruit[]");
var txt1 = document.getElementById("txt1");

frutas = [].slice.apply(frutas);
var listCheckedOptions = frutas.filter(function (fruta, indice) {
    return fruta.checked;
}).sort(function (fruta, indice) {
    return fruta.dataset.order;
});


function addToList(checkObj, outputObj) {
  //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);
  }
  
  if (!checkObj.checked) {
    checkObj.parentNode.querySelector('span').innerHTML = '';  
    delete checkObj.dataset.order;
  }
  return updateValores(outputObj);
}

var updateValores = function (outputObj) {
  outputObj.value = ""; //Limpa o textarea
  outputObj.value = listCheckedOptions.map(function (o) {
    return o.value;
  }).join('\r\n'); //Adiciona no textarea  
  
  listCheckedOptions.forEach(function (fruta, indice) {
    var span = fruta.parentNode.querySelector('span');
    fruta.dataset.order = indice + 1;
    span.innerHTML = indice + 1;
  });

  return;
}

frutas.forEach(function (fruta, indice) {
  fruta.onclick = function () {
    addToList(this, txt1);
  };
});
updateValores(txt1);

<form name="myform">  
  <label>
    <input type="checkbox" name="fruit[]" value="Oranges" data-order="2" checked />  
    <font color="#808080">Oranges</font>
    <span></span>
  </label><br>
  <label>
    <input type="checkbox" name="fruit[]" value="Apples" />
    <font color="#808080">Apples</font>
    <span></span>
  </label><br>
  <label>
    <input type="checkbox" name="fruit[]" value="Grapes" data-order="1" checked />
    <font color="#808080">Grapes</font>
    <span></span>
  </label><br>
  <textarea rows="4" cols="10" name="txt1" id="txt1" style="color:#808080"  readonly></textarea>
</form>