views:

62

answers:

2

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

+1  A: 
$('.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 
});​
BC
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.
Vincent
$(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.
BC
+1  A: 

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

})
fudgey
This works well..Except that we don't need total.. :)
Vincent