Return Multiple CheckBox Values if Checked in jQuery

Question

I have multiple checkbox in my page. i want to retrieve its values if checked.

Here is HTML Code..

<input name="ctl1189" type="checkbox" id="chkTicket_189310" class=" chkTicket" value="189310">

<input name="ctl1190" type="checkbox" id="chkTicket_189311" class=" chkTicket" value="189311">

And So on..

Javascript Code:

function updateTicketAction() {
    var allUpdatedVendorTickets = $('.chkTicket').filter(function() { return this.value != $input.is(':unchecked'); });
    var sFinalUpdateList = '';

    allUpdatedVendorTickets.each(function() {
        var ids = $(this).attr('id').split('_')[1];

        sFinalUpdateList += ((sFinalUpdateList == '') ? '' : '|') + ids + ',' + $(this).val();
    });
    alert(sFinalUpdateList);
}

No idea what your filter function is supposed to do. $input isn't declared in your snippet. — Fabrício Matté
– Fabrício Matté, Commented Aug 6, 2012 at 7:46
I know man, I meant you're comparing a value property with a boolean. And $input is not declared on your code above. — Fabrício Matté
– Fabrício Matté, Commented Aug 6, 2012 at 7:53
Why do you use string? It had better use array. Then you can call join method, somthing like finalUpdatelist.join('|') — Sergii Stotskyi
– Sergii Stotskyi, Commented Aug 6, 2012 at 7:55

sedran · Accepted Answer · 2012-08-06 07:50:40Z

1

function updateTicketAction() {
    var sFinalUpdateList = '';
    $("input.chkTicket:checked").each( 
        function() { 
           var ids = $(this).attr('id').split('_');
           var id = ids[1];
           sFinalUpdateList += ((sFinalUpdateList == '') ? '' : '|') + id + ',' + $(this).val();
        } 
    );
    alert(sFinalUpdateList);
}

http://jquery-howto.blogspot.com/2008/12/how-to-check-if-checkbox-is-checked.html

answered Aug 6, 2012 at 7:50

sedran

3,5763 gold badges26 silver badges41 bronze badges

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

1 Comment

sedran Over a year ago

I edited it, and I added .chkTicket class to the jQuery selector.

feklee · Accepted Answer · 2012-08-06 08:33:21Z

0

I just created a fiddle. Look in the JavaScript console for the resulting object, which you can then further process.

Code:

var checkedCheckboxes = $('.chkTicket:checked'),
    results = {};

checkedCheckboxes.each(function () {
    var key = $(this).attr('id').split('_')[1];
    results[key] = $(this).val();
});

function alertResults(results) {
    var text = '', sep = '';
    $.each(results, function (key, value) {
        text += sep + key + '=' + value;
        sep = '|';
    });
    alert(text);
}

alertResults(results);
console.log(results);

edited Aug 6, 2012 at 8:33

answered Aug 6, 2012 at 8:07

feklee

7,7859 gold badges58 silver badges75 bronze badges

3 Comments

Shaggy Over a year ago

It Prints alert as [Object object]

feklee Over a year ago

In Chrome, it prints an object in the development console. You can click a little arrow next to it, to show its contents.

feklee Over a year ago

Try again. Now you get the results in a popup.

Mirodil · Accepted Answer · 2012-08-06 07:52:26Z

0

try this code

var collect='';
$('input:checked').each(function(i,e){  
    collect+=(collect===''? $(e).attr('name')+'='+$(e).val():','+$(e).attr('name')+'='+$(e).val());
    alert(collect);
})

answered Aug 6, 2012 at 7:52

Mirodil

2,3293 gold badges31 silver badges41 bronze badges

1 Comment

Shaggy Over a year ago

It worked...But it gives undefined values also for unchecked checkbox.

Kristoffer Lundberg · Accepted Answer · 2012-08-06 08:10:05Z

0

Here is a jsfiddle snippet that returns all checked inputs.. One question though, why do you split your id-attribute when you have your id stored in value-attribute? Anyways, hope this works for you!

function updateTicketAction() {
  var allUpdatedVendorTickets = $('.chkTicket:checked');
  var sFinalUpdateList = '';

  allUpdatedVendorTickets.each(function () {
    sFinalUpdateList += ((sFinalUpdateList == '') ? '' : '|') + $(this).val();
  }); 

  alert(sFinalUpdateList);
}

answered Aug 6, 2012 at 8:10

Kristoffer Lundberg

8764 silver badges16 bronze badges

1 Comment

Shaggy Over a year ago

I just want to retrieve the Values...as the ID itself have value so doing split thing

Alex Ball · Accepted Answer · 2012-08-06 08:10:58Z

0

Or you can use map():

var el = $('input[type=checkbox]:checked').map(function(i,e){

        var id = $(e).attr('id').replace('chkTicket_', '');
        var val = $(e).val();

        return {
                'id' : id,
                'value' : val
               }

    });

console.log(el[0].id);

answered Aug 6, 2012 at 8:10

Alex Ball

4,4842 gold badges20 silver badges23 bronze badges

Comments

Community · Accepted Answer · 2020-06-20 09:12:55Z

0

Your filter function is wrong.

this.value != $input.is(':unchecked');

You're comparing a .value property (string) to the return value of the .is jQuery method (boolean). It's similar to:

'value' != !true  //checked
'value' != !false //unchecked

Both will always return true - unless value is 0 or an empty string which evaluates to a falsy value and the right side of the expression evaluates to false, for which the != different operator will return false.

So, your filter's callback doesn't filter anything at all, except taking out checked boxes with value 0 or no value (which is unintentional).

You can avoid using a filter function by using the :checked selector:

var allUpdatedVendorTickets = $('.chkTicket:checked');

Now you'll have a jQuery object containing only the checked .chkTicket, much better.

Next thing, you're making bad use of strings.

"189310,189310|189311,189311"

That's what your function is generating. Every time you need to manipulate those results, you'll have to split the string at |, creating a new array. It's much better to store it as an array already.

var sFinalUpdateList = [];

Assuming your keys and values are always the same as in your example, you should store them only once as well.

allUpdatedVendorTickets.each(function() {
    sFinalUpdateList.push(this.value);
});

This will generate a much more clean and maintainable array with only the checked boxes' values:

sFinalUpdateList =>
       [0] -> "189310"
       [1] -> "189311"

You can obtain their IDs by appending chkTicket_ to those values.

jsFiddle

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Aug 6, 2012 at 8:25

Fabrício Matté

70.3k27 gold badges135 silver badges168 bronze badges

1 Comment

Fabrício Matté Over a year ago

@SagarDumbre Yes, consider using arrays or objects (as in feklee's answer) when handling that kind of stuff, it'll save you a lot of headaches in the future. =]

Collectives™ on Stack Overflow

Return Multiple CheckBox Values if Checked in jQuery

6 Answers 6

1 Comment

3 Comments

1 Comment

1 Comment

Comments

jsFiddle

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

1 Comment

3 Comments

1 Comment

1 Comment

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related