javascript - 最多选中四个复选框并将选中的值存储到文本框

Question

我正在显示一些复选框。用户最多可以选中 4 个框。我将选中的值存储在 4 个文本框中。

我的问题:当用户随机取消选中一个框并选中另一个框时，如何正确存储"new"选中的值？

我按如下方式存储值:首先 checkin item_1，第二次 checkin item_2，第三次 checkin item_3 ...例如，如果用户取消选中第一个复选框，我如何存储他或的下一个框的值她检查了 item_1？请帮忙。

简化的代码

<input type="checkbox" name="prodname_1" id="prodname_1"value="1"/>
<input type="checkbox" name="prodname_2" id="prodname_2"value="2"/>
<input type="checkbox" name="prodname_3" id="prodname_3"value="3"/>
.
.
<input type="checkbox" name="prodname_10" id="prodname_10"value="10"/>

<input type="text" name="item_0" id="item_0"value=""/>
<input type="text" name="item_1" id="item_1"value=""/>
<input type="text" name="item_2" id="item_2"value=""/>
<input type="text" name="item_3" id="item_3"value=""/>


$(document).ready(function (e) 
{
    counter=0;
    $('input[id^="prodname_"]').change(function() 
     {
            id = $(this).attr('id');

            var arr = id.split('_');
            valueChecked=$('#'+id).val();
            if(this.checked)
            {
                if(counter==4)
                {
                    alert('Allready checked 4 items');
                    this.checked=false;
                    return false;
                }
                $("#item_"+counter).val(valueChecked);
                ++counter;
            }

    });
});

Answer 1

不用保留计数器，只需在发生更改时计算选中框的数量即可。

修改为使用您想要的逻辑(花了一点时间才弄清楚):)

JSFiddle: http://jsfiddle.net/TrueBlueAussie/tmLnbvv0/9/

$(document).ready(function (e) {
    var $items = $('input[id^="item_"]');
    var checkboxes = $('input[id ^= "prodname_"]').change(function () {
        var id = $(this).attr('id');
        var arr = id.split('_');
        valueChecked = $(this).val();

        // Count of checked checkboxes
        var counter = checkboxes.filter(':checked').length;

        if ($(this).is(':checked')) {
            // count the checked checkboxes
            if (counter > 4) {
                alert('Already checked 4 items');
                $(this).prop('checked', false);
            } else {
                // Add to the first available slot
                $items.filter(function(){return $(this).val() == ""}).first().val(valueChecked);
            }
        } else {
            // Remove the matching value
            $items.filter(function(){return $(this).val() == valueChecked;}).first().val('');
        }
    });
});

注意:更改复选框的“jQuery 方式”是使用 prop('checked', booleanvalue) (上面也进行了更改)

V2 - 如果您不想要间隙:

这个版本实际上更简单，因为它只是清除项目并按顺序填充任何选中的复选框值。

JSFiddle: http://jsfiddle.net/TrueBlueAussie/tmLnbvv0/13/

$(document).ready(function (e) {
    var $items = $('input[id^="item_"]');
    var $checkboxes = $('input[id ^= "prodname_"]').change(function () {
        // Count of checked checkboxes
        var counter = $checkboxes.filter(':checked').length;

        // count the checked checkboxes
        if (counter > 4) {
            alert('Already checked 4 items');
            $(this).prop('checked', false);
        }

        // Clear all the items
        $items.val('');

        // Fill the items with the selected values
        var item = 0;
        $checkboxes.filter(':checked').each(function () {
            $('#item_' + (item++)).val($(this).val());
        });
    });
});