CODEWITHSUNDEEP
jquery
besmir
besmir

Reputation: 23

jquery checkbox check using arrays

I was trying to check check-boxes using array in jquery using multiple select options If, lets say Option 1 and Option 3 is clicked, checkboxes which id is set in array will become checked and if removed unchecked.

<select id="lab_abbr" multiple >
  <option value="o1">Option 1</option>
  <option value="o2">Option 2</option>
  <option value="o3">Option 3</option>
</select>

and checkboxes

<input type="checkbox" name="lab[one]" id="lab_one" />
<input type="checkbox" name="lab[two]" id="lab_two" />
<input type="checkbox" name="lab[three]" id="lab_three" />
<input type="checkbox" name="lab[four]" id="lab_four" />
<input type="checkbox" name="lab[five]" id="lab_five" />
<input type="checkbox" name="lab[six]" id="lab_six" />

and last jquery

$(document).ready(function() {
    $("#lab_abbr").live("change", function(e)  {
        var o1 = ['lab_one', 'lab_three'];
        var o2 = ['lab_two', 'lab_six'];
        var o3 = ['lab_four, 'lab_five'];


    });
});

Regards, Besmir

Upvotes: 1

Views: 3611

Answers (2)

Sampson
Sampson

Reputation: 268344

Give a man fish...

var mapping = { 'o1' : ['lab_one', 'lab_three'], 'o2' : ['lab_two', 'lab_six'], 
                'o3' : ['lab_four', 'lab_five'] };

$("#lab_abbr").on("change", function () {
  $.each( this.options, function () {
    $( "#" + mapping[ this.value ].join(", #") ).prop("checked", this.selected); 
  });
});

Demo: http://jsbin.com/onapem/edit#javascript,html

Teach a man to fish...

Let's break it down now and see what each part does.

We start off by creating an object which will serve as a sort of associative array. Essentially, we get to associate one value to another. In this case, we want to associate the value of the selected option (be it "o1" or "o2"), to a series of checkboxes:

var mapping = { 'o1' : ['lab_one', 'lab_three'] };

Next we bind our logic to the change event of our select menu using the $.on method:

$("#lab_abbr").on("change", function(){
  /* React to the change */
});

Anytime this menu undergoes a change, we want to cycle over its options. We're not yet worried about whether or not the options are selected - we just want to access every one of them. We do so by using the $.each iterator method:

$.each( this.options, function(){
  /* Do something with each individual <option /> */
});

Within this block, we want to gather up those checkbox id's that are associated with this option value. For instance, if we wanted all values associated with "o1" (which would represent the first option through our $.each, we could do this:

alert( mapping['o1'] ); // ['lab_one', 'lab_three']

We're going t do this dynamically though. Within our $.each, the keyword this always refers to the current <option /> being handled. We can use its value to look up any fields associated with it:

mapping[ this.value ]; // returns an array

We would like to convert this into a CSS selector to pass jQuery, so we use the .join() method on the returned array to create a string:

mapping[ this.value ].join(", #");

The .join() method accepts a string to add between each value. In the case above, our first iteration through will return in the following string:

"lab_one, #lab_three"

Note the , # seperating the two values from the array. We need another # in the front of this string so that #lab_one will also be selected. This was solved by concatenating the character onto the resulting string:

$( "#" + mapping[ this.value ].join(", #") )

Lastly, we call the $.prop() method which allows us to set a property value on the element. We're going to set the checked property.

With the $.prop() method, you pass in the property you would like to set, and the value you would like to set it to.

$( /*...*/ ).prop("checked", this.selected );

Remember, this represents whichever <option /> we're currently accessing in this iteration of $.each(). The <option /> has a native property called selected which returns either true or false - indicating if it's selected or not. We use this to tell jQuery what the value of "checked" should be.

So if the option being handled is selected, so will each one of the checkboxes it is associated with. And likewise, if the option being handled is not selected, neither will the checkboxes it is associated with.

Want a smaller fish?

If you wanted to shorten this all a bit more, you could store the jQuery selector directly in the object:

var mapping = { 'o1' : '#lab_one, #lab_three', 'o2' : '#lab_two, #lab_six',
                'o3' : '#lab_four, #lab_five' };

$("#lab_abbr").on("change", function () {
  $.each( this.options, function () {
    $( mapping[ this.value ] ).prop( "checked", this.selected ); 
  });
});

Demo: http://jsbin.com/onapem/2/edit

Upvotes: 6

Selvakumar Arumugam
Selvakumar Arumugam

Reputation: 79830

You need to define the var's as an object and the simply iterate over the selections and check the checkboxes. See below,

DEMO

$(document).ready(function() {
    var selections = {
                  o1: ['lab_one', 'lab_three'],
                  o2: ['lab_two', 'lab_six'],
                  o3: ['lab_four', 'lab_five']
    };

    var $checkbox = $(':checkbox');

    $("#lab_abbr").on("change", function(e)  {

        $.each ($checkbox, function (i, ck) { //uncheck all checkbox
            this.checked = false;
        });

        $.each($(this).val(), function (idx, val) { //iterate over selected options
            $.each (selections[val], function (i, v) { //iterate over the selections
                $('#' + v).prop('checked', true); //set the checkbox
            });        
        });        
    });
});

Upvotes: 0

Related Questions