Filling in a textbox with values from checkboxes_问答_开发者

Filling in a textbox with values from checkboxes

开发者 https://www.devze.com 2023-02-12 01:41 出处：网络

Here is the code I have so far <head> <script type=\"text/javascript\"> function list(c,n,z) {

Here is the code I have so far

  <head>

  <script type="text/javascript">

  function list(c,n,z) {
   s=document.form.marktext.value;
  if (c.checked) {
  if (s.indexOf(n)<0) s+=', '+n;
  } else {
  s=document.form.marktext.value.replace(', '+n,'');
 }
  z=", ";
  if (s.substring(2) == z) s=s.substring(2);
  document.form.marktext.value=s;}



  function getchecked() {
      var newtxt = '';
      var chkbx = document.getElementsByTagName('input');

      for(var i = 0; i < chkbx.length; i ++) 
        {
          if(chkbx[i].type == 'checkbox' && chkbx[i].checked === true) {
          if(newtxt.length !== 0) {
            newtxt += ',';
            }
            newtxt += chkbx.innerHTML;
 开发者_StackOverflow社区       }

  }

  document.form.marktext.value = newtxt;

  }

  </script>

  </head>


  <body>
  <form name="form">
  <input type="text" value="" name="marktext"><br>
  <input type="checkbox" name="mark" value="word" onclick="getchecked()">Word<br>
  <input type="checkbox" name="mark" onclick="getchecked()">Type<br>
 <input type="checkbox" name="mark" onclick="getchecked()">Other<br>
  </form>


  </body>

It almost works but when I click a checkbox, I am getting an 'undefined' label in the textbox instead of the checkbox value. I am guessing it is something small and stupid but I can't seem to figure it out.

Notice the index on newtxt += chkbx[i].value; instead of newtxt += chkbx.innerHTML;

  <head>

  <script type="text/javascript">

  function list(c,n,z) {
   s=document.form.marktext.value;
  if (c.checked) {
  if (s.indexOf(n)<0) s+=', '+n;
  } else {
  s=document.form.marktext.value.replace(', '+n,'');
 }
  z=", ";
  if (s.substring(2) == z) s=s.substring(2);
  document.form.marktext.value=s;}



  function getchecked() {

      var newtxt = '';
      var chkbx = document.getElementsByTagName('input');

        for(var i = 0; i < chkbx.length; i ++) 
    {
      if(chkbx[i].type == 'checkbox' && chkbx[i].checked === true) {
      if(newtxt.length !== 0) {
        newtxt += ',';
        }
        newtxt += chkbx[i].value;
    }

    }

  document.form.marktext.value = newtxt;

  }

  </script>

  </head>


  <body>
  <form name="form">
  <input type="text" value="" name="marktext"><br>

  <input type="checkbox" name="mark" value="word" onclick="getchecked()">Word<br>
  <input type="checkbox" name="mark" onclick="getchecked()" value="type">Type<br>
  <input type="checkbox" name="mark" onclick="getchecked()" value="other">Other<br>

  </form>


  </body>

But my suggestion use jQuery or any other javascript library!!

The propoerty innerHtml doesn't apply to gather Textboxes labels. Plus, the way you coded it, these are not labels.

Look at this link, i think your solution is inside : http://www.webdevelopersnotes.com/tips/html/finding_the_value_of_a_checkbox.php3

Change this line

newtxt += chkbx.innerHTML;

newtxt += chkbx[i].nextSibling.data;

<input> does not have an innerHTML but it has a sibling - the text node next to it. And you probably want to display the "content" of this text node. (Note: your output was "undefined" because you called innerHTML on the array and not on a <input> node)