将选中的复选框值插入文本字段

Question

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

问题：在检查时，我还尝试将选中的复选框值转换为文本字段值，hummus1，hummus2，mayo1，jam1 - （这些文本字段将更改为隐藏字段在现场发布）。 2个鹰嘴豆泥函数不起作用，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>

Answer 1

查看我所做的更改，看看你是否了解发生了什么。这段代码在我的demo中可以正常使用。您不需要将每个更改函数包装在自己的函数中，只需要在文档就绪函数中设置每个操作。

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>

JavaScript的：

$(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);
    });
});