Jquery - Loop through Checkboxes and Multiple elements

Question

All,

I have a set of elements like this in a form:

<input type="checkbox" name="chk[140]">
<input type="hidden" value="3" name="ctcount[140]">
<input type="hidden" value="Apples" name="catname[140]">

<input type="checkbox" name="chk[142]">
<input type="hidden" value="20" name="ctcount[142]">
<input type="hidden" value="Bananas" name="catname[142]">

<input type="checkbox" name="chk[144]">
<input type="hidden" value="200" name="ctcount[144]">
<input type="hidden" value="Strawberries" name="catname[144]">

<input type="checkbox" name="chk[145]">
<input type="hidden" value="0" name="ctcount[145]">
<input type="hidden" value="Carrots" name="catname[145]">

When a user clicks a button, I want the Javascript to:

 1. Loop through all the checkboxes
 2. For all the checked checkboxes, 
     2a. Get ctcount value
     2b. Get catname value
     2c. If ctcount value > 50, alert a message saying "Unable to add item
          as max limit for 'catname' has reached.
     2d. Break the loop after it encountered first ctcount value that is 
         greater than 50.

I am new to JQuery..have the following code so far:

var checklimit = 50; $('#frmTest input:checkbox:checked').each(function(i) { alert(this.value); });

How do I do this using JQuery?

Thanks

what have you attempted so far?

Russ Cam
– Russ Cam

2010-06-07 21:58:30 +00:00
Commented Jun 7, 2010 at 21:58 — Russ Cam
– Russ Cam, Commented Jun 7, 2010 at 21:58

Mottie · Accepted Answer · 2010-06-08 01:12:29Z

1

Try this... it extracts out the ID from the name, then uses that to find the value and name. Demo here.

Script

$(document).ready(function(){

  $(':button').click(function(){
    var total = 0, done = false;
    $(':checked').each(function(){
      if (!done) {              
        var catid = $(this).attr('name').replace(/chk\[(\d+)\]/,'$1'); // extract #
        var catval = parseInt( $('input[name=ctcount\[' + catid + '\]]').val(), 10);
        var catnam = $('input[name=catname\[' + catid + '\]]').val();
        if (total + catval > 50) {
          alert('Unable to add item as max limit for "' + catnam + '" has reached');
          done = true;
        } else {
          total = total + catval;
        }
      }
   })
   alert( 'The total is ' + total ); 
  });

})

answered Jun 8, 2010 at 1:12

Mottie

86.7k30 gold badges132 silver badges248 bronze badges

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

Comments

BC. · Accepted Answer · 2010-06-07 21:59:33Z

1

$('.button').click(function() {
     var sum = 0;
     var cancel = false;

     $('input[type="checkbox"]:checked').each(function() {
          if(cancel)
              return;

          var count = parseInt($(this).next().attr('value'));
          var name = $(this).next().next().attr('value');
          sum += count;

         if(sum > 50) {
               alert('no way dude');
               cancel = true;
               return;
          }
     });

     if(!cancel)
         // sum <= 50 
});

answered Jun 7, 2010 at 21:59

BC.

25.1k12 gold badges49 silver badges63 bronze badges

2 Comments

Jake Over a year ago

Thanks.. Can't we use the element name instead of $(this).next()? This will probably break if the order of the elements changed in the HTML.

BC. Over a year ago

$(this) will work. next() will break if you start moving things around. In order to get away with not using next(), you have to substring or capture the field number out of the checkbox name and use that to construct the hidden field names.

Collectives™ on Stack Overflow

Jquery - Loop through Checkboxes and Multiple elements

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related