复选框值与逗号分隔的列表

Question

我一直在努力尝试从一组复选框中获取逗号分隔值的列表。 这里有很多有用的答案，但是我无法得出最终结论。 我的代码行为奇怪，具体取决于是否选中了第一个复选框，而我却无法弄清原因（这是我第一次尝试使用javascript！）

<script type="text/javascript">
    function updateTextArea() {
        var allVals = $('input.gift:checked').map( 
        function() {return this.value;}).get().join();

        $('#txtValue').val(allVals)
    }
    $(function () {
        $('#gift input').click(updateTextArea);
        updateTextArea();
    });
</script>

这是它随附的html。

<fieldset id="gift">
    <input type='checkbox' name='lFreeProductid' value='8840'
        id="lFreeProductid1" class="gift">
    </td>
    <td class="style42">64 SSG</td>
    <td class="style32">&nbsp;</td>
    </tr>


    <tr id="tr2">
        <td class="style33"><input type='checkbox' name='lFreeProductid'
            value='420' id="lFreeProductid1" class="gift"></td>
        <td class="style41">Perfect D</td>
        <td>&nbsp;</td>
    </tr>


    <tr id="tr3">
        <td class="style33"><input type='checkbox' name='lFreeProductid'
            value='460' id="lFreeProductid1" class="gift"></td>
        <td class="style41">Soccer Attack</td>
        <td>&nbsp;</td>
    </tr>
</fieldset>

<tr>
    <td class="style33">&nbsp;</td>
    <td class="style41">&nbsp;</td>
    <td>&nbsp;</td>
</tr>
</table>


<textarea id="txtValue"></textarea>

我知道这是一千次被问到的问题，但我似乎找不到解决此特定问题的方法。 任何帮助将不胜感激。

Answer 1

我认为您的代码运行良好！

一次检查此演示： https : //jsbin.com/vigixi/46/edit?html,js,output

如果这不是您想要的输出。 然后，让我们知道您到底想要什么。

Answer 2

我建议您更正所有HTML语法错误

<fieldset id="gift">
  <table>
    <tr id="tr1">
      <td class="style33"><input type='checkbox' name='lFreeProductid' value='8840' id="lFreeProductid1"  class="gift"></td>
      <td class="style42"><label for="lFreeProductid1">64 SSG</label></td>
      <td class="style32">&nbsp;</td>
    </tr>


    <tr id="tr2">
      <td class="style33"><input type='checkbox' name='lFreeProductid' value='420' id="lFreeProductid2"  class="gift"></td>
      <td class="style41"><label for="lFreeProductid2">Perfect D</label></td>
      <td>&nbsp;</td>
    </tr>


    <tr id="tr3">
      <td class="style33"><input type='checkbox' name='lFreeProductid' value='460' id="lFreeProductid3" class="gift"></td>
      <td class="style41"><label for="lFreeProductid3">Soccer Attack</label></td>
      <td>&nbsp;</td>
    </tr>

    <tr>
      <td class="style33">&nbsp;</td>
      <td class="style41">&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
  </table>
</fieldset> 
<textarea id="txtValue"></textarea>

您的问题可能是由于某种浏览器或/和文档类型