Question

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

我的问题：如何正确存储＆＃34; new＆＃34;当用户随机取消选中一个框并检查另一个框时检查值？

我按如下方式存储值：首先检入item_1，第二个检入item_2，第三个检入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());
        });
    });
});

Answer 2

看看

＆＃13;

$(document).ready(function(e) {
  var counter = 0,
    $items = $('input[name^="item_"]');
  $('input[id^="prodname_"]').change(function() {
    var id = this;

    if (this.checked) {
      if (counter == 4) {
        this.checked = false;
        return;
      }
      $("#item_" + counter).val(this.value).attr('data-value', this.value);
      ++counter;
    } else {
      var $item = $items.filter('[data-value="' + this.value + '"]');
      var index = $items.index($item);
      $items.slice(index, counter).each(function(i) {
        var $n = $items.eq(index + i + 1);
        $(this).val($n.val() || '').attr('data-value', $n.attr('data-value'));
      });
      counter--;
      $("#item_" + counter).val('').removeAttr('data-value');
    }

  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<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_4" id="prodname_4" value="4" />
<input type="checkbox" name="prodname_5" id="prodname_5" value="5" />
<input type="checkbox" name="prodname_6" id="prodname_6" value="6" />
<input type="checkbox" name="prodname_7" id="prodname_7" value="7" />
<input type="checkbox" name="prodname_8" id="prodname_8" value="8" />
<input type="checkbox" name="prodname_9" id="prodname_9" value="9" />
<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="" />

＆＃13;

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

2 个答案: