如果在jQuery中签入，则返回多个CheckBox值

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

Answer 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

Answer 2

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

Answer 3

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

Answer 4

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

Answer 5

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

Answer 6

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