Question

我正在处理以下代码。如何将复选框组中的值添加或删除到数组中？

显然，我能够在选中复选框时添加值，但是我在取消选中复选框时删除相同值的尝试却没有效果！

 
 let opts = [];
 $('input:checkbox[name=a]').on('change', function(){
  if($(this).is(':checked')){
       let val = $(this).data('shape');
        opts.push(val);
        console.log(opts);
       }
       else{
                let val = $(this).data('shape');
       opts.filter(a => a !== val);
       console.log(opts);
       }
  
});

 $('input:checkbox[name=b]').on('change', function(){
  if($(this).is(':checked')){
       let val = $(this).data('shape');
        opts.push(val);
        console.log(opts);
       }
       else{
         let val = $(this).data('shape');
       opts.filter(a => a !== val);
       console.log(opts);
       }
  
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" name="a" data-shape="scb1" />
<input type="checkbox" name="a" data-shape="scb2"  />
<input type="checkbox" name="a" data-shape="scb3"  />
<input type="checkbox" name="a" data-shape="scb4" />


<input type="checkbox" name="b" data-shape="mcb1"  />
<input type="checkbox" name="b" data-shape="mcb2"  />
<input type="checkbox" name="b" data-shape="mcb3"  />
<input type="checkbox" name="b" data-shape="mcb4"  />

Answer 1

如果您想使opts.filter(a => a !== val);工作，则必须再次指定新值，例如：opts = opts.filter(a => a !== val);

您还可以使用opts.splice( $.inArray(val, opts), 1 );它将从您的数组中删除所选的val

注意：您可以通过允许多项选择$('input:checkbox[name=a],input:checkbox[name=b]')

来改善功能

演示

let opts = [];
$('input:checkbox[name=a],input:checkbox[name=b]').on('change', function() {
  if ($(this).is(':checked')) {
    let val = $(this).data('shape');
    opts.push(val);
    console.log(opts);
  } else {
    let val = $(this).data('shape');
    opts.splice( $.inArray(val, opts), 1 )
    console.log(opts);
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" name="a" data-shape="scb1" />
<input type="checkbox" name="a" data-shape="scb2" />
<input type="checkbox" name="a" data-shape="scb3" />
<input type="checkbox" name="a" data-shape="scb4" />


<input type="checkbox" name="b" data-shape="mcb1" />
<input type="checkbox" name="b" data-shape="mcb2" />
<input type="checkbox" name="b" data-shape="mcb3" />
<input type="checkbox" name="b" data-shape="mcb4" />

这是您代码的更新版本：

$('input:checkbox[name=a],input:checkbox[name=b]').on('change', function() {
  let val = $(this).data('shape');
  if ($(this).is(':checked')) {
    opts.push(val);
  } else {
    opts.splice( $.inArray(val, opts), 1 )
  }
  console.log(opts);
});

Answer 2

您可以使用filter删除未经检查的数据，希望这会有所帮助

let opts = [];
$('input[type="checkbox"]').on('change', function() {
  let val = $(this).data('shape');
  if ($(this).is(':checked')) {
    opts.push(val);
    console.log(opts);
  } else {
    opts = opts.filter(function(elem) {
      return elem != val;
    });
    console.log(opts);
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" name="a" data-shape="scb1" />
<input type="checkbox" name="a" data-shape="scb2" />
<input type="checkbox" name="a" data-shape="scb3" />
<input type="checkbox" name="a" data-shape="scb4" />
<input type="checkbox" name="b" data-shape="mcb1" />
<input type="checkbox" name="b" data-shape="mcb2" />
<input type="checkbox" name="b" data-shape="mcb3" />
<input type="checkbox" name="b" data-shape="mcb4" />

Answer 3

let opts = [];
$('input:checkbox[name=a]').on('change', function() {
  if ($(this).is(':checked')) {
    let val = $(this).data('shape');
    opts.push(val);
    console.log(opts);
  } else {
    let val = $(this).data('shape');
    opts = opts.filter(a => a !== val);
    console.log(opts);
  }

});

$('input:checkbox[name=b]').on('change', function() {
  if ($(this).is(':checked')) {
    let val = $(this).data('shape');
    opts.push(val);
    console.log(opts);
  } else {
    let val = $(this).data('shape');
    opts = opts.filter(a => a !== val);
    console.log(opts);
  }

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" name="a" data-shape="scb1" />
<input type="checkbox" name="a" data-shape="scb2" />
<input type="checkbox" name="a" data-shape="scb3" />
<input type="checkbox" name="a" data-shape="scb4" />


<input type="checkbox" name="b" data-shape="mcb1" />
<input type="checkbox" name="b" data-shape="mcb2" />
<input type="checkbox" name="b" data-shape="mcb3" />
<input type="checkbox" name="b" data-shape="mcb4" />

array的filter方法返回一个新数组，您应该将其分配给“选择值”以使其正常工作

Answer 4

let opts = [];
 $('input:checkbox[name=a],[name=b]').change(function(){

  let val = $(this).data('shape');
  
  if($(this).is(':checked'))
  {      
        opts.push(val);
        console.log(opts);
       }
       else
       {         
         opts.splice( $.inArray($(this).data('shape'), opts), 1 );
         console.log(opts);
       }  
   });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" name="a" data-shape="scb1" > First </input><br>
<input type="checkbox" name="a" data-shape="scb2"  > Second </input><br>
<input type="checkbox" name="a" data-shape="scb3"  > Three</input><br>
<input type="checkbox" name="a" data-shape="scb4" > Four</input><br>
<br>

<input type="checkbox" name="b" data-shape="mcb1"  >Five</input><br>
<input type="checkbox" name="b" data-shape="mcb2"  >Six</input><br>
<input type="checkbox" name="b" data-shape="mcb3"  >Seven</input><br>
<input type="checkbox" name="b" data-shape="mcb4"  >Eight</input><br>

从许多复选框组向数组添加和删除复选框值

4 个答案: