jquery - 如何在 jQuery 中操作表单字段值

Question

我正在尝试获取一些复选框的值并将它们输入到隐藏的表单字段中，有没有办法在 jQuery 中执行此操作，

我的复选框看起来像这样

<form>
    <input type="checkbox" name="chicken" id="chicken" />Chicken

    <input type="checkbox" name="meat" id="meat" />Meat
</form>

<form method="post" action="">
    <input type="hidden" name="my-item-name" value="" />
    <input type="submit" name="my-add-button" value=" add " /> 
</form>

我只需要提交隐藏字段数据，所以我希望在勾选复选框时更改隐藏字段的值。因此，如果勾选了第一个复选框，我希望隐藏字段的值变为 chicken，如果它们都被勾选，则该值应该是 chicken,meat。

感谢您的帮助。

Answer 1

我认为这是迄今为止提供的更简洁的方法...

var values = [];
$('#chicken, #meat').filter(':checked').each(function() {
    values.push($(this).attr('id'));
});
$('#hidden_field').val(values.join(','));

您应该在表单的提交事件中运行上述代码，而不是在用户选中其中一个框时更新隐藏字段，这样它只需要在最终发送表单时执行一次:

$('#myform').submit(function() {
    // update the hidden field...
    var values = [];
    $('#chicken, #meat').filter(':checked').each(function() {
        values.push($(this).attr('id'));
    });
    $('#hidden_field').val(values.join(','));

    // and submit the form
    return true;
});

此外，因为现在唯一可以让我轻松判断您想要的值来自何处的地方是复选框的 id 属性。使用已发布的 val() 的解决方案将返回空白，因为您的复选框中没有 value="" 属性。如果您想使用 value="" 属性更新隐藏字段(这是预期的行为)，您应该添加该属性，然后更改 $(this).attr('id ') 到上面代码中的 $(this).val()。

编辑(回应评论):

如果显示的复选框超过 2 个，则需要更改选择器。上面我使用了 $('#chicken, #meat')。如果您想在文档中包含所有复选框，您可以将其更改为$('input:checkbox')，但这可能是最好的方法(避免意外行为later on) 是给所有你想包含在隐藏字段中的复选框一个公共(public)类，然后让你的选择器类似于 $('input.myclass:checkbox')。最后，只要您将表单的 ID 与我在上面使用的 ID (myform) 相匹配，那么当提交表单时，隐藏字段的更新应该会自动为您处理(假设还有隐藏字段字段的 ID 为 hidden_​​field 并且用户启用了 Javascript...)。此外，您需要确保上面的表单绑定(bind)代码包裹在 $(document).ready(function() {//code here }); 否则代码将在 DOM 准备好之前运行并且您会将事件绑定(bind)到一个不存在的元素。