Add object to array if checkbox is checked, remove if not

Question

I'm trying to add some objects to an array if a checkbox is checked. But I can't seem to make it work. What I would like is to add an object depending on the values of the checked checkboxes. I hope you guys can understand it. Let me show you in code :

This is the code to check if a checkbox is checked :

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);
  });

Let's these are the object:

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

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

And this is my html :

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

How can I add these objects to the array depending on the checkbox value? Any help would be highly appreciated.

Ismail Rubad · Accepted Answer · 2018-03-12 08:34:14Z

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>

answered Mar 12, 2018 at 8:34

Ismail Rubad

1,4782 gold badges13 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

John Over a year ago

Ok, this will work fine. Is there any way I can make this dynamic? I mean let's say I have multiple objects and later on I add a few other objects as well. I would not like to change the code again since I would need to lets say: if(id==7){ filter_options.push(horse); } do this. How can I make this dynamic?? Thanks :)

Ismail Rubad Over a year ago

To make it dynamic, you need to have a predefined array of all the animal objects data like human,dog, horse etc. Then you can do it by data-id.

newman · Accepted Answer · 2018-03-12 07:55:27Z

0

Try this:

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);
});

answered Mar 12, 2018 at 7:55

newman

4243 silver badges12 bronze badges

1 Comment

John Over a year ago

This will not work since the array filter-options is always empty.

Shashank · Accepted Answer · 2018-03-12 09:20:39Z

0

First of all there needs to some modification on the HTML to allow the end user to view properly using div and label.

Next, you just need the logic for addition and deletion based on the :checked condition.

$(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() {}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="option">
  <div>
    <label for="human">
      <input type="checkbox" value="human" name="human" />
      Human
    </label>
  </div>
  <div>
    <label for="human">
      <input type="checkbox" value="dog" name="dog"/>
      Dog
    </label>
  </div>
  <div>
    <label for="human">
      <input type="checkbox" value="cat" name="cat"/>
      Cat
    </label>
  </div>
</div>

answered Mar 12, 2018 at 9:20

Shashank

2,1002 gold badges21 silver badges40 bronze badges

1 Comment

John Over a year ago

I didn't want to add the "cat" (cat as string) in the array but the cat as an object.I solved anyway thank you for your time :)

Taner Alagöz · Accepted Answer · 2022-03-25 07:23:15Z

0

function submitForm(frm) {
    frm.createSpinner();
    return new Promise((submitResolve, submitReject) => {
        frm.objectify().then((formData) => {
            post(frm.ga("action"), formData).then((res) => {
                submitResolve(res);
                frm.removeSpinner();
            });
        });
    });
}

Bu ile sarmalamayı deneyebilirsiniz.

answered Mar 25, 2022 at 7:23

Taner Alagöz

12 bronze badges

1 Comment

Community Over a year ago

As it’s currently written, your answer is unclear. Please edit to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers in the help center.

Collectives™ on Stack Overflow

Add object to array if checkbox is checked, remove if not

4 Answers 4

2 Comments

1 Comment

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

1 Comment

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related