efficiently creating variables when a checkbox is checked and using these variables later in the code

Question

below is the information I need help with.

$(document).ready(function(){
        $('.checkboxes :checkbox').click(function(){
            if($(this).is(':checked')){
                console.log(this.id + this.checked)

i want to set a variable with the samename of the id of the checked box so if showItems was checked i would have a variable var showItems = true; I want this so I could see if showItems is checked which would alow me to perform the proper functions i think i could do something like this

                if($this.id = "withones"){
                    var withones = true;//on
                }
                if($this.id = "withoutOnes"){
                    var withoutOnes = true;//on
                }
                etc.

i feel like the above is a rookie way to code. lets say i have alot of checkboxes and it also looks like im repeating myself. I tried putting the ids in an array and loop through them but I got the html element in the console when i clicked on the box. I would like for someone to tell me if there is a more efficient way to set up these variables. and if so show me please.

Also I'm new to programming so thanks for your help so far. but I was also thinking about another problem. if I set up these variables here and I want to set up another function somewhere else to perform mathematical operations perse. i want that function to be able to evaluate the value of the withones and withoutOnes variables so I would like to do something like this in the function

function add(){
                    if(withones){ //true|| false
                        return 2 + 2;
                    }
                    if (withoutOnes) {
                        return 'blah'
                    };
                }

I have had problems in the past trying to test the values that are set outside the function. I think i tried setting it in the arguments. but it just didn't read. If you could also show me an example of using the variables some where else in the code like discussed above that will be helpful . I forgot to mention that the value of the variable will change when the user clicks on the box. either to true or false. I think my problem in the past is that when the box is checked and then uncheck I had a problem changing the variable especially when it is being used in a separate function

            }
        });
    });

Answer 1

your question is quite broad; so I’ll try to do my best to give you some kind of answer. First of all I’d use variables of global scope when declaring variables: withones and withoutOnes. Secondly, you wanted to avoid repetition in your code. Well, for that purpose I’d use JavaScript Arrays. In an array, you can add your variables as objects. In an object you can have your ids and other data “packed” neatly in the array, which in turn helps your code to become efficient. Below is an array with objects:

objectArray = [{
    id: "withones",
    checked: false,
    method: function () {
        return 2 + 2;
    }
}, {
    id: "withoutOnes",
    checked: false,
    method: function () {
        return 'blah';
    }
}];

The above array can be used in your $('.checkboxes :checkbox').click(function() handler and add() function to avoid repetition. The updated code is below where jQuery's each() method is used for looping Array elements.

The last a bit of your question was related to add() function. Well, this was the tricky bit of your question, and I tried to use a callback function hopefully in the right way to execute your functions from the array. In the add method I tried to follow this answer: https://stackoverflow.com/a/13343452/2048391

About the last bit I’m not 100% sure did I use a callback function in the right way; so I hope someone more familiar with these tricky JavaScript functions can correct me, if something needs to be changed –thanks.

objectArray = [{
    id: "withones",
    checked: false,
    method: function () {
        return 2 + 2;
    }
}, {
    id: "withoutOnes",
    checked: false,
    method: function () {
        return 'blah';
    }
}];


$(document).ready(function () {
    $('.checkboxes :checkbox').click(function () {
      
        var id = this.id;
        var checkedValue = this.checked;

        $.each(objectArray, function (index, object) {
            if (object.id === id) {
                object.checked = checkedValue;
            }
        });

        add();
    });

    function add() {
        // clear results      
        $("#addResults").text("");
      
        $.each(objectArray, function (index, object) {

            if (object.checked === true) {
              
                var returnValue = createCallback(object.method)
                
                 $("#addResults").append(returnValue + "<br>");

                console.log(returnValue);
            }
        });
    }

    function createCallback(method) {
            return method();
    }

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="checkboxes">
    <input type="checkbox" id="withones"></input>
    <label>With Ones</label>
    <br>
    <input type="checkbox" id="withoutOnes"></input>
    <label>Without Ones</label>
</div>

<div id="addResults">

</div>

Answer 2

The other two answers are correct, though it sounds like you're wanting to know generally how to manage a big list of checkboxes with differing methods depending on type. It could look like this:

function multiply(this_object){
      if((this_object.is(':checked')) && (this_object.attr("with") == 1))
          return "with withone and checked";
      else
          return "is not both";
}


$(document).ready(function(){
    $('.checkboxes').click(function(){
       var this_object = $(this);
       alert(multiply(this_object));

    });
});

There should be no need to store all of the values in a variable unless you are passing all of them to another page - eg., via AJAX. Just reference them straight from the source field. If you need other info stored alongside, make a new attribute on the field - like the "with" one that I made for this example. See this Fiddle: http://jsfiddle.net/6ug6gL97/

Answer 3

You can capture the id with the attr() or you can just change the value of the checkbox with val() method in jQuery like this: FIDDLE

$(document).ready(function () {

    $('.checkboxes').change(function (event) {
        if ($(this).is(':checked')) {
            var captureId = $(this).attr('id');
            $(this).val(true);
            alert($(this).val());
        }
        else {$(this).val(false);
              alert($(this).val());}
    });
});

Note that you can evaluate later all the checkboxes with one button and collect the value false or true from them. Why would you go through all of the complications with changing values of variables.

Answer 4

You can have an object with your vars and add vars to that object dinamically:

var oVars = {}

// adding a var oVars[nameVar] = valueVar

// accessing the var oVars[nameVar]