如果选中复选框，则将对象添加到数组，否则删除

Question

如果选中复选框，我尝试将某些对象添加到数组中。但我似乎无法使其发挥作用。我想要的是根据选中的复选框的值添加一个对象。我希望你们能理解它。让我用代码告诉你：

这是检查复选框是否已选中的代码：

var filter_options=[];
        $('input:checkbox').click(function()
        {
          var name=$(this).val().trim();
          if(this.checked)
          {
            filter_options.push(name);
            console.log('Add: ' + name);
        }
        else
        {
            var index=filter_options.indexOf(name);
            if(index > -1)
            {
              filter_options.splice(index, 1);
              console.log('Remove: ' + name + ' at index: ' + index);
          }
      }
      $('#result').html(filter_options.join('; '));
      console.log(filter_options);
  });

让这些是对象：

var human = new Human();
var dog = new Dog();
var cat = new Cat();

var options = []; //push the objects here depending on the checkboxes value.

这是我的HTML：

<div class="option">
  <input type="checkbox" value="human">
  <input type="checkbox" value="dog">
  <input type="checkbox" value="cat">
</div>

如何根据复选框值将这些对象添加到数组中？任何帮助都将受到高度赞赏。

Answer 1

function Human() {
    this.id = 1; 
    this.firstName = "Human";
    this.lastName = "Last Name";
    this.age = 5;
    this.eyeColor = "color";
}

function Dog() {
    this.id = 2;
    this.firstName = "Dog";
    this.lastName = "Last Name";
    this.age = 5;
    this.eyeColor = "color";
}

function Cat() {
    this.id = 3;
    this.firstName = "Cat";
    this.lastName = "Last Name";
    this.age = 5;
    this.eyeColor = "color";
}
var human = new Human();
var dog = new Dog();
var cat = new Cat();
var filter_options=[];
        $('input:checkbox').click(function()
        {
          var id = $(this).attr("data-id");
          var name=$(this).val().trim();
          if(this.checked)
          {
            if(id==1){
              filter_options.push(human);
            }
            else if(id==2){
                filter_options.push(dog);
            }
            else if(id==3){
                filter_options.push(cat);
            }
        }
        else
        {
            var index=filter_options.indexOf(name);
            if(index > -1)
            {
              filter_options.splice(index, 1);
              console.log('Remove: ' + name + ' at index: ' + index);
            }
            for(var i = 0; i < filter_options.length; i++) {
              if(filter_options[i].id == id) {
                  filter_options.splice(i, 1);
                  break;
              }
          }
      }
      $('#result').html(filter_options.join('; '));
      console.log(filter_options);
  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<div class="option">
  <input type="checkbox" value="human" data-id="1">
  <input type="checkbox" value="dog" data-id="2">
  <input type="checkbox" value="cat" data-id="3">
</div>

Answer 2

试试这个：

var filter_options=[];
$(".option").change(function()
{
    $(".option").each(function()
    {
        if( $(this).is(':checked') )
        {
            var name=$(this).val().trim();
            filter_options.push(name);
            console.log('Add: ' + name);
        } else {
            var index=filter_options.indexOf(name);
            if(index > -1)
            {
              filter_options.splice(index, 1);
              console.log('Remove: ' + name + ' at index: ' + index);
          }
        }
    });
     $('#result').html(filter_options.join(': '));
      console.log(filter_options);
});

Answer 3

首先，需要对HTML进行一些修改，以允许最终用户使用cols = df.columns[df.isna().any()] df1 = df.drop(cols, axis = 1) print (df1) 和div正确查看。

接下来，您只需要根据label条件添加和删除逻辑。

＆＃13;

＆＃13;

:checked

＆＃13;

$(function() {
  clickHandler();
});

function clickHandler() {
  var options = [];
  var human = new Human();
  var dog = new Dog();
  var cat = new Cat();

  $('input:checkbox').on('change', function() {
    var name = $(this).attr('name');
    if ($(this).is(':checked')) {
      options.push(name);
    } else {
      options.splice(options.indexOf(name), 1);
    }
    console.log('List = ', options)
  });
}

function Human() {}

function Dog() {}

function Cat() {}

＆＃13;

＆＃13;

＆＃13;