Question

我有一个页面，其中包含从数据库动态生成的x行数。每个表单都有一组复选框和一个保存按钮。其他一切都正常工作，但似乎无论我点击哪个保存按钮，它都会从所有表格中选择（在第一个之后;我先点击的保存按钮有正确的选择。）我在这里错了吗？

<table>
    <tr class="even">
        <td class="checksCol">
            <input type="checkbox" name="pages_new" id="new_10" value="10">salads<br>
            <input type="checkbox" name="pages_new" id="new_9" value="9">sandwiches<br>
            <input type="checkbox" name="pages_new" id="new_7" value="7">sides<br>
            <input type="checkbox" name="pages_new" id="new_14" value="14">soups<br>
        </td>
    </tr>
    <tr class="odd">
        <td colspan="3">
            <input type="button" class="saveDisclaimer" id="saveDisclaimer_new" value="Save">
        </td>
    </tr>
</table>

<table>
    <tr class="even">
        <td class="checksCol">
            <input type="checkbox" name="pages_2" id="2_10" value="10">salads<br>
            <input type="checkbox" name="pages_2" id="2_9" value="9">sandwiches<br>
            <input type="checkbox" name="pages_2" id="2_7" value="7">sides<br>
            <input type="checkbox" name="pages_2" id="2_14" value="14">soups<br>
        </td>
    </tr>
    <tr class="odd">
        <td colspan="3">
            <input type="button" class="saveDisclaimer" id="saveDisclaimer_2" value="Save">
        </td>
    </tr>
</table>

$(document).ready(function() {
  $('.saveDisclaimer').click( function(e) {
    var id = this.id.split("_").pop();
    console.log("id: " + id);
    var pages = [];

    $('input[name="pages_"+id]:checked').each(function() {
      pages.push(this.value);
    });
    console.log("pages from input name=pages_" + id);
    console.log(pages);

    e.preventDefault();
  });

});

JSBin example - 从第一个表单中选择几个复选框;点击保存。控制台显示正确的选择。然后，在不取消选中复选框的情况下，单击第二个表单中的几个，然后单击第二个保存按钮。控制台显示仍然被选中的所有复选框，而不仅仅是与特定保存按钮一起使用的复选框。

Answer 1

您没有正确创建字符串。尝试：

$('input[name="pages_' + id + '"]:checked').....

Answer 2

很简单。你在sigle引号中有双引号：

'input[name="pages_"+id]:checked'

应该是：

'input[name="pages_'+id+'"]:checked'

Jquery选择器的复选框没有得到正确的项目

2 个答案: