Question

我有一个jQuery脚本，会将所有复选框值附加到一个带有<input type="text"/>的{{1}}，但是当我选中一个框时，它会附加其他复选框中的所有值，以及我只想附加我按顺序检查的那些。

','

$('.check_list').on('change', function() {
  var n = $(this).siblings('input:checkbox');
  var nControl = $('.codeParc');

  if ($(this).prop('checked')) {
    n.prop('checked', true);
    var vals = nControl.map(function() {
      return $(this).val();
    }).get().join(',');

  } else {
    n.prop('checked', false);
  }
  $('#test').val(vals);
});

每当我选中一个复选框时，此代码都会返回所有值<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input style="cursor: pointer;" type="checkbox" value="" class="check_list"></input> <input type="checkbox" class="codeParc" value="1"></input> <input type="checkbox" class="codeParc" value="2"></input> <input type="checkbox" class="codeParc" value="3"></input> <input type="text" id="test" value=""></input>，我需要的是选中一个框并仅显示其编号，然后在选中时附加其余部分。

Answer 1

首先请注意，input元素是自动关闭的，因此<input />而不是<input></input>。

更简单的方法是将选定的值映射到数组，并在每次单击复选框时使用该数组中的值更新input的文本，如下所示：

$('.check_list').change(function() {
  $('.codeParc').prop('checked', this.checked);
  updateText();
});

$('.codeParc').change(function() {
  $('.check_list').prop('checked', $('.codeParc').length == $('.codeParc:checked').length);
  updateText();
});

function updateText() {
  var checkedValues = $('.codeParc:checked').map(function() {
    return this.value;
  }).get();
  $('#test').val(checkedValues.join(','));
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input style="cursor: pointer;" type="checkbox" value="" class="check_list" />
<input type="checkbox" class="codeParc" value="1" />
<input type="checkbox" class="codeParc" value="2" />
<input type="checkbox" class="codeParc" value="3" />
<input type="text" id="test" value="" />

Answer 2

这是你想要的吗？

＆＃13;

$('input:checkbox').on('change', function () {
  // toggle all checkbox
  if($(this).hasClass('check_list')){
    $('.codeParc').prop('checked', $(this).prop('checked'));
  }
  
  var vals = $('.codeParc:checked').map(function () {
       return $(this).val();
  }).get().join(',');
  $('#test').val(vals);
 
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input style="cursor: pointer;" type="checkbox" value="" class="check_list"></input>
<input type="checkbox" class="codeParc" value="1"></input>
<input type="checkbox" class="codeParc" value="2"></input>
<input type="checkbox" class="codeParc" value="3"></input>

<input type="text" id="test" value=""></input>

＆＃13;

Answer 3

你想要这样吗？

＆＃13;

$('.check_list').on('change', function () {
    var n = $(this).siblings('input:checkbox');
    var nControl = $('.codeParc');

    if ($(this).prop('checked')) {
       // n.prop('checked',true);
        var vals = nControl.map(function () {
            if($(this).prop('checked'))
            {
            	return $(this).val();
            }
            else
            {
            	return;
            }
        }).get().join(',');

    } else {
      //  n.prop('checked',false);
    }
    $('#test').val(vals);
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input style="cursor: pointer;" type="checkbox" value="" class="check_list"></input>
<input type="checkbox" class="codeParc" value="1"></input>
<input type="checkbox" class="codeParc" value="2"></input>
<input type="checkbox" class="codeParc" value="3"></input>

<input type="text" id="test" value=""></input>

＆＃13;

在复选框的输入文本中逐个附加

3 个答案: