Question

这是我到目前为止的代码

  <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;
        }

  }

  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>

它几乎可以工作但是当我点击一个复选框时，我在文本框中得到一个'undefined'标签，而不是复选框值。我猜这是一个小而愚蠢的东西，但我似乎无法弄明白。

Answer 1

属性innerHtml不适用于收集文本框标签。另外，你编码的方式，这些不是标签。

看看这个链接，我认为你的解决方案在里面：http://www.webdevelopersnotes.com/tips/html/finding_the_value_of_a_checkbox.php3

Answer 2

请注意newtxt += chkbx[i].value;上的索引，而不是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>

但我的建议是使用jQuery或任何其他javascript库!!

Answer 3

更改此行

newtxt += chkbx.innerHTML;

到

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

<input>没有innerHTML，但它有一个兄弟 - 它旁边的文本节点。您可能希望显示此文本节点的“内容”。（注意：您的输出是“未定义的”，因为您在数组上调用innerHTML而不在<input>节点上调用

使用复选框中的值填充文本框

3 个答案: