Javascript 在文本字段中插入复选框值

我有一个包含3个复选框数组的表单-hummus[]，mayo[]，jam[]。在下面的jquery函数中，当选中所需数量的复选框时，其余的复选框将被禁用（当前有效）

问题：在选中复选框时，我还试图将选中的复选框值转换为文本字段值，hummus1、hummus2、mayo1、jam1-（这些文本字段将更改为隐藏字段，以便在活动时发布）。 2个hummus函数不起作用，无论是否选中，mayo和jam函数只返回数组的第一个复选框值

非常感谢您的帮助

jQuery(function one(){
var max = 2;
var checkboxes = $('input[type="checkbox"][name="hummus[]"]');

checkboxes.change(function(){
var current = checkboxes.filter(':checked').length;
checkboxes.filter(':not(:checked)').prop('disabled', current >= max);

// Trying to insert the 2 checked hummus values from the hummus array into text fields
$('input[type="text"][name="hummus1"]').val($('input[type="checkbox"][name="hummus[0]"]').val());
$('input[type="text"][name="hummus2"]').val($('input[type="checkbox"][name="hummus[1]"]').val());
});
});

jQuery(function two(){
var max = 1;
var checkboxes = $('input[type="checkbox"][name="mayo[]"]');

checkboxes.change(function(){
var current = checkboxes.filter(':checked').length;
checkboxes.filter(':not(:checked)').prop('disabled', current >= max);

// Trying to insert the single checked mayo value into the mayo1 text field
$('input[type="text"][name="mayo1"]').val($('input[type="checkbox"][name="mayo[]"]').val());
});
});

jQuery(function three(){
var max = 1;
var checkboxes = $('input[type="checkbox"][name="jam[]"]');

checkboxes.change(function(){
var current = checkboxes.filter(':checked').length;
checkboxes.filter(':not(:checked)').prop('disabled', current >= max);

// Trying to insert the single checked jam value into the jam1 text field
$('input[type="text"][name="jam1"]').val($('input[type="checkbox"][name="jam[]"]').val());
});
});

jQuery(function uncheck() {
// Uncheck all checkboxes on page load    
$(':checkbox:checked').removeAttr('checked');
})

HTML：

<form id="orderProductForm219" name="orderProductForm219" method="post">
<b>Select any TWO Hummus from this list.</b> 
<br /><br />
<input type="checkbox" name="hummus[]" value="chilli hummus with harissa"> chilli hummus with harissa<br />
<input type="checkbox" name="hummus[]" value="cumin &amp; lemon oil hummus"> cumin &amp; lemon oil hummus<br />
<input type="checkbox" name="hummus[]" value="garlic hummus"> garlic hummus<br />
<input type="checkbox" name="hummus[]" value="pumpkin, fetta &amp; dukkah hummus"> pumpkin, fetta &amp; dukkah hummus
<br /><br />
<b>and include ONE Mayonnaise from this list.</b> 
<br /><br />
<input type="checkbox" name="mayo[]" value="aioli"> aioli<br />
<input type="checkbox" name="mayo[]" value="saffron, dill &amp; mustard mayonnaise"> saffron, dill &amp; mustard mayonnaise<br />
<input type="checkbox" name="mayo[]" value="wasabi mayonnaise"> wasabi mayonnaise<br />
<input type="checkbox" name="mayo[]" value="chilli mayonnaise"> chilli mayonnaise<br />
<input type="checkbox" name="mayo[]" value="caesar dressing"> caesar dressing<br />
<input type="checkbox" name="mayo[]" value="smoked aioli"> smoked aioli
<br /><br />
<b>and include ONE Relish, Jam, Curd or Pesto from this list.</b> 
<br /><br />
<input type="checkbox" name="jam[]" value="middle eastern red pepper &amp; pomegranate pesto"> middle eastern red pepper &amp; pomegranate pesto<br />
<input type="checkbox" name="jam[]" value="aubergine relish"> aubergine relish<br />
<input type="checkbox" name="jam[]" value="beetroot relish"> beetroot relish<br />
<input type="checkbox" name="jam[]" value="tomato &amp; chilli relish"> tomato &amp; chilli relish<br />
<input type="checkbox" name="jam[]" value="taramasala"> taramasala<br />
<input type="checkbox" name="jam[]" value="preserved lemons"> preserved lemons<br />
<input type="checkbox" name="jam[]" value="rasberry &amp; white chocolate jam"> rhubarb, rasberry &amp; white chocolate jam<br />
<input type="checkbox" name="jam[]" value="apricot, saffron &amp; vanilla bean jam"> apricot, saffron &amp; vanilla bean jam<br />
<input type="checkbox" name="jam[]" value="apricot &amp; armaretto jam"> apricot &amp; armaretto jam<br />
<input type="checkbox" name="jam[]" value="rose water &amp; cardamon marmalade"> rose water &amp; cardamon marmalade<br />
<input type="checkbox" name="jam[]" value="whiskey &amp; ginger marmalade"> whiskey &amp; ginger marmalade<br />
<input type="checkbox" name="jam[]" value="lemon curd"> lemon curd<br />
<input type="checkbox" name="jam[]" value="Lemon &amp; passion fruit curd"> lemon &amp; passion fruit curd
<br />
<input type="hidden" name="productId" value="219" />
<input type="hidden" name="productTitle" value="Gift Pack" />
<input type="hidden" name="price" value="1.00" />
<input type="text" name="hummus1" id="hummus1" value="" />
<input type="text" name="hummus2" id="hummus2" value="" />
<input type="text" name="mayo1" id="mayo1" value="" />
<input type="text" name="jam1" id="jam1" value="" />
</form>

从该列表中选择任意两个鹰嘴豆泥。



辣椒鹰嘴豆泥配哈里萨

孜然；柠檬油鹰嘴豆泥

蒜泥

南瓜,菲塔,；杜卡鹰嘴豆泥



从这个列表中包括一个蛋黄酱。



艾奥利

藏红花、莳萝；芥末蛋黄酱

芥末蛋黄酱

辣椒蛋黄酱

凯撒敷料

烟熏艾奥利



并在此列表中包括一种调味品、果酱、凝乳或香蒜酱。



中东红辣椒；石榴香蒜酱

茄子调味品

甜菜根调味品

番茄酱；辣椒口味

塔拉马萨拉

蜜饯柠檬

大黄,覆盆子,；白巧克力酱

杏、藏红花及；香草豆酱

杏；阿玛雷托果酱

玫瑰水；豆蔻果酱

威士忌及；姜汁果酱

柠檬凝乳

柠檬及；西番莲豆腐

看看我所做的更改，看看你是否明白发生了什么。这段代码在我的工作环境中很好。您不需要将每个change函数包装在其自己的函数中，只需要在documentready函数中设置每个操作

HTML:

---

还有问题中的HTML？谢谢你在这里的帮助安布罗西亚。问题中添加了HTML。尝试你上面的建议。修改我的答案以适合你的HTML。工作演示链接。非常优雅的解决方案。工作得很好。我感谢你的时间和帮助。现在我了解了如何在同一个函数调用中分别处理3个复选框数组。我将进一步研究您的解决方案，以完全掌握方法。您甚至不需要在加载时删除所有检查。。。它们将始终未经检查而加载。

<form id="orderProductForm219" name="orderProductForm219" method="post">
    <b>Select any TWO Hummus from this list.</b> 
    <br /><br />
    <input type="checkbox" name="hummus[]" value="chilli hummus with harissa"> chilli hummus with harissa<br />
    <input type="checkbox" name="hummus[]" value="cumin &amp; lemon oil hummus"> cumin &amp; lemon oil hummus<br />
    <input type="checkbox" name="hummus[]" value="garlic hummus"> garlic hummus<br />
    <input type="checkbox" name="hummus[]" value="pumpkin, fetta &amp; dukkah hummus"> pumpkin, fetta &amp; dukkah hummus
    <br /><br />
    <b>and include ONE Mayonnaise from this list.</b> 
    <br /><br />
    <input type="checkbox" name="mayo[]" value="aioli"> aioli<br />
    <input type="checkbox" name="mayo[]" value="saffron, dill &amp; mustard mayonnaise"> saffron, dill &amp; mustard mayonnaise<br />
    <input type="checkbox" name="mayo[]" value="wasabi mayonnaise"> wasabi mayonnaise<br />
    <input type="checkbox" name="mayo[]" value="chilli mayonnaise"> chilli mayonnaise<br />
    <input type="checkbox" name="mayo[]" value="caesar dressing"> caesar dressing<br />
    <input type="checkbox" name="mayo[]" value="smoked aioli"> smoked aioli
    <br /><br />
    <b>and include ONE Relish, Jam, Curd or Pesto from this list.</b> 
    <br /><br />
    <input type="checkbox" name="jam[]" value="middle eastern red pepper &amp; pomegranate pesto"> middle eastern red pepper &amp; pomegranate pesto<br />
    <input type="checkbox" name="jam[]" value="aubergine relish"> aubergine relish<br />
    <input type="checkbox" name="jam[]" value="beetroot relish"> beetroot relish<br />
    <input type="checkbox" name="jam[]" value="tomato &amp; chilli relish"> tomato &amp; chilli relish<br />
    <input type="checkbox" name="jam[]" value="taramasala"> taramasala<br />
    <input type="checkbox" name="jam[]" value="preserved lemons"> preserved lemons<br />
    <input type="checkbox" name="jam[]" value="rasberry &amp; white chocolate jam"> rhubarb, rasberry &amp; white chocolate jam<br />
    <input type="checkbox" name="jam[]" value="apricot, saffron &amp; vanilla bean jam"> apricot, saffron &amp; vanilla bean jam<br />
    <input type="checkbox" name="jam[]" value="apricot &amp; armaretto jam"> apricot &amp; armaretto jam<br />
    <input type="checkbox" name="jam[]" value="rose water &amp; cardamon marmalade"> rose water &amp; cardamon marmalade<br />
    <input type="checkbox" name="jam[]" value="whiskey &amp; ginger marmalade"> whiskey &amp; ginger marmalade<br />
    <input type="checkbox" name="jam[]" value="lemon curd"> lemon curd<br />
    <input type="checkbox" name="jam[]" value="Lemon &amp; passion fruit curd"> lemon &amp; passion fruit curd
    <br />
    <input type="hidden" name="productId" value="219" />
    <input type="hidden" name="productTitle" value="Gift Pack" />
    <input type="hidden" name="price" value="1.00" />
    <input type="text" name="hummus1" id="hummus1" value="" />
    <input type="text" name="hummus2" id="hummus2" value="" />
    <input type="text" name="mayo1" id="mayo1" value="" />
    <input type="text" name="jam1" id="jam1" value="" />
</form>

$(document).ready(function()
{
    $('input[type=checkbox]:checked').removeAttr('checked');

    var checkboxesH = $('input[type="checkbox"][name="hummus[]"]');  
    checkboxesH.change(function()
    {
        var max = 2;
        var current = checkboxesH.filter(':checked').length;

        checkboxesH.filter(':not(:checked)').prop('disabled', current >= max);

        // Trying to insert the 2 checked hummus values from the hummus array into text fields
        var hummus1Val = $(checkboxesH.filter(':checked').get(0)).val();
        $('input[type="text"][name="hummus1"]').val(hummus1Val);
        var hummus2Val = $(checkboxesH.filter(':checked').get(1)).val();
        $('input[type="text"][name="hummus2"]').val(hummus2Val);
    });

    var checkboxesM = $('input[type="checkbox"][name="mayo[]"]');
    checkboxesM.change(function()
    {
        var max = 1;
        var current = checkboxesM.filter(':checked').length;

        checkboxesM.filter(':not(:checked)').prop('disabled', current >= max);

        // Trying to insert the single checked mayo value into the mayo1 text field
        var mayo1Val = checkboxesM.filter(':checked').val();
        $('input[type="text"][name="mayo1"]').val(mayo1Val);
    });

    var checkboxesJ = $('input[type="checkbox"][name="jam[]"]');
    checkboxesJ.change(function()
    {
        var max = 1;
        var current = checkboxesJ.filter(':checked').length;
        checkboxesJ.filter(':not(:checked)').prop('disabled', current >= max);

        // Trying to insert the single checked jam value into the jam1 text field
        var jam1Val = checkboxesJ.filter(':checked').val();
        $('input[type="text"][name="jam1"]').val(jam1Val);
    });
});