Question

我有一个类.selectall的元素。当我单击该元素时，所有表行都是checked。我想要做的是获取已选中复选框的所有data-id值，并将它们存储在ID为#selected_items的隐藏字段中。目前我有当前的coffeescript，允许我单独选中每个复选框并将data-id映射到隐藏字段值。所以我需要能够点击.selectall元素，填充隐藏字段，然后如果我决定单独取消选中任何复选框，则反映任何更改。

HTML

<div class="btn-group">
    <button class="btn selectall" type="button">Select All</button>
    <button class="btn unselectall" type="button">Unselect All</button>
</div>

<table class="coupons">
    <input class="inline" data-id="1" type="checkbox">
    <input class="inline" data-id="2" type="checkbox">
    <input class="inline" data-id="3" type="checkbox">
    ...
</table>

<input id="selected_items" name="selected_items" type="hidden" value="">

的CoffeeScript

$('.coupons input[type="checkbox"]').change(->
    ids = $('input[type="checkbox"]:checked')
        .map(-> $(this).data("id"))
        .get().join(",")

    $("#selected_items").val(ids)
)

Answer 1

尝试

update = () -> 
    ids = $('input[type="checkbox"]:checked')
        .map(-> $(this).data("id"))
        .get().join(",")

    $("#selected_items").val(ids)

$('.coupons input[type="checkbox"]').change(update)
$('.selectall').click(->
    $('input[type="checkbox"]').prop('checked', true);
    update()
)
$('.unselectall').click(->
    $('input[type="checkbox"]').prop('checked', false);
    update()
)

演示：Fiddle - 轻微的标记更改，以便于调试

单击元素后，将复选框映射到隐藏字段

1 个答案: