如何在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如果两个都被勾选,则值应该是鸡肉,肉.

谢谢你的帮助.

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'),但可能最好的方法(以避免以后出现意外行为)是将所有要包含在隐藏字段中的复选框提供给一个公共类,然后让你的选择器像$('input.myclass:checkbox').最后,只要您将表单的ID与上面使用的ID(myform)相匹配,那么在提交表单时应自动更新隐藏字段(假设隐藏字段的ID hidden_field和用户也是如此)已启用Javascript ...).此外,您需要确保上面的表单绑定代码被包装,$(document).ready(function() { // code here });否则代码将在DOM准备好之前运行,并且您将事件绑定到不存在的元素.

Answer 2

我认为你可以用另一种方式做到这一点,如果你可以使用单一表格,你应该这样做:

<form method="post" action="">
    <label><input type="checkbox" name="food[]" value="chicken" /> Chicken</label>
    <label><input type="checkbox" name="food[]" value="meat" /> Meat</label>
    <input type="submit" name="my-add-button" value=" add " /> 
</form>

您将通过在PHP中访问$ _POST ['food']获得一个数组,但它在其他服务器端语言中的工作方式几乎相同:

$food = $_POST['food'];

$ food将是:

['chicken', 'meat']; // If both are checked