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')。如果您想在文档中包含 all 复选框，您可以将其更改为$('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

Answer 3

给“my-item-name”隐藏字段一个id（可以与name相同）给复选框命名相同！然后在复选框的onclick事件中调用类似onclick="SetHiddenFieldValue();"

的函数

javascript函数woudl然后就像：

function SetHiddenFieldValue()
{
  var checks = document.getElementsByName("checkboxesname");
  var hiddenFielVal = "";
  for(i = 0; i < checks.length; i++)
  {
    if(hiddenFielVal != "")
     hiddenFielVal += ",";
    hiddenFielVal += checks[i].value;
  }
  document.getElementById('hiddenfieldid').value = hiddenFielVal;
}

Answer 4

您可以在使用onsubmit事件提交表单之前设置隐藏字段的值：

<head>

<script type="text/javascript">
function check() {
    var isChicken = document.getElementById('chicken').checked;
    var isMeat = document.getElementById('meat').checked;
    if (isChicken && isMeat) {
        document.getElementById('my-item-name').value = 'chicken,meat';
    } else if (isChicken) {
        document.getElementById('my-item-name').value = 'chicken';
    }
    return true;
}
</script>
</head>
<body>

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

<form method="post" action="" onsubmit="return check();">
    <input type="hidden" name="my-item-name" id="my-item-name" value="" />
    <input type="submit" name="my-add-button" value=" add " /> 
</form>

</body>

Answer 5

将“my-item-name”隐藏字段设为id

<input type="checkbox" id="chkBox" value="chicken" onclick="setHiddenControlValue('chicken');"/>Chicken
<input type="checkbox" id="chkBox" value="meat" onclick="setHiddenControlValue('meat');"/>Meat

并使用以下JS函数： -

function setHiddenControlValue(selectedValue) {
    document.getElementById("my-item-name").value = selectedValue;
}

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

5 个答案: