How to assign variable number of checkbox values to variables in jQuery?

Question

I have an HTML form with a number of checkboxes that all have the same class="shared". I use the following to limit the number of checkable checkboxes to 3 at a time which works as intended:

$(document).on('change', '.shared', function() {
    var countShared = $('.shared:checked').length;
    if(countShared > 3 && $(this).is(':checked')) {
        alert("You can only select up to 3 departments to share with.");
        $(this).prop('checked',false);
    }
});

Now my problem is the following:

I have 3 variables, shared1, shared2 and shared3 and want to assign the values from the checked checkboxes above to these variables. I am looking for something that assigns the value of the 1st checked checkbox to variable shared1, the value of the 2nd checked checkbox to shared2 and the value of the 3rd checked checkbox to shared3.

Usually I would try an .each loop for something like this and go by the class .shared but I don't know how to apply this here as there could also be less than 3 or no checkboxes checked and I don't know which ones are.

How can I realise this ?

can you share your markup code also and what are you goind to do with shared1,2,3 variables? — Bhushan Kawadkar
– Bhushan Kawadkar, Commented Sep 24, 2014 at 11:49
I can't share all the rest of the code as this would be too much but I want to pass these variables via an Ajax call to make some updates to a db. — user2571510
– user2571510, Commented Sep 24, 2014 at 11:52
how many total checkboxes available there and are checkboxes having any unique id? — Bhushan Kawadkar
– Bhushan Kawadkar, Commented Sep 24, 2014 at 11:53
Each checkbox has a unique ID, checkboxX, where X is a unique number. The number of checkboxes varies and there is no limit for them as these are fetched from a db but it should not be more than 10. — user2571510
– user2571510, Commented Sep 24, 2014 at 11:54

fstanis · Accepted Answer · 2014-09-24 11:54:25Z

1

Initially set each of the variables to false.

Then, if there are no boxes checked, you're done. If there's one, just set shared1 to true. If there's two, set shared1 and shared2 to true and finally, if there are three checked boxes, set all three to true.

shared1 = false;
shared2 = false;
shared3 = false;
var checkedBoxes = $('.shared:checked');
if (checkedBoxes[0]) shared1 = true;
if (checkedBoxes[1]) shared2 = true;
if (checkedBoxes[2]) shared3 = true;

answered Sep 24, 2014 at 11:54

fstanis

5,6541 gold badge28 silver badges46 bronze badges

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

2 Comments

user2571510 Over a year ago

I first read this wrong but this actually works great ! Thanks a lot - will accept as soon as I can. :)

fstanis Over a year ago

You could use checkedBoxes[...].checked, but there is no need for that since the selector .shared:checked will only select the boxes that are checked (and thus the value is always true).

Subha · Accepted Answer · 2014-09-24 11:56:47Z

1

If you have all the check box elements inside a parent, you can try the following -

$(YourSelector).index()

This will return you the index number of the checkbox and you can assign to respective variables.

just check where index is 1 and assign to shared1 variable and so on.

answered Sep 24, 2014 at 11:56

Subha

1,0511 gold badge6 silver badges12 bronze badges

Collectives™ on Stack Overflow

How to assign variable number of checkbox values to variables in jQuery?

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related