How to loop through an if statement that makes textboxes available for input?

Question

I'd like to loop if statement which is this line if($(this).hasClass('numInput')) { because multiple items calculation in code below doesn't work.

It should be like this: When clicking checkbox of multiple items, textbox become available to input. By inputting numbers (ex: 2) then checking checkbox below (ex: checking 100 and 200), 500(100*2 + 200*2) shows up in total.

A single task can work, however checking more than one item causes trouble.

Trying to loop if statement if it is able to do or some another idea to fix bug.

var subTotal, total;
$(function() {
  $('input.value, input.pages').off('change');
  $('input.value, input.pages').on('change', function() {
    amountCalc();
  });
});

function amountCalc() {
  total = 0;
  $('.category').each(function() {
    subTotal = 0;
    $(this).find('input[type="checkbox"]:checked, input[type="radio"]:checked').each(function() {
      if ($(this).hasClass('numInput')) {
        var num = parseInt($(this).next().val());
        var itemNest = $(this).closest('.itemNest');
        var array = [];
        $('input[class="value"]:checked', itemNest).each(function() {
          var itemVal = Number($(this).val());
          array.push(itemVal);
        });
        for (var i = 0; i < array.length; i++) {
          subTotal += array[i] * num;
        }
        return false;
      } else {
        subTotal += Number($(this).val());
      }
    });
    $(this).find('.subTotal').val(subTotal);
    total += subTotal;
  });

  $('.total').val(total);
  $('.totalPer130').val(total * 1.3);
  $('.totalPer70').val((total) - (total * 0.3));

}

$(function() {
  $('.category .itemNest').each(function() {
    var itemNest = this;
    //デフォルト　children選択不可
    $('input[name="children"]').prop('checked', false).prop('disabled', true);
    $('.category .itemNest').find('.parent').change(function() {
      //parentのチェック判別
      if ($('.parent', itemNest).prop("checked")) {
        $('input[name="children"]', itemNest).prop('disabled', false);
      } else {
        $('input[name="children"]', itemNest).prop('checked', false).prop('disabled', true);
      }
      amountCalc();
    });
  });
});



  
    
      
        
          multiple items:
            pages
          
            100
            200
            300
          
        
        
          multiple items:
            pages
          
            100
            200
            300
          
        
      
    
  
  
    
      
        
          single item:
            
              100
          200
          300
          
        
      
    
  
  
    
      
        
          single item:
          
            100
            200
            300
          
          none
        
      
    
  

  
    
      Total : yen
    
    
      30% extra：yen
    
    
      30% discount：yen

Daniel Beck · Accepted Answer

I'm honestly not certain what you mean by "loop an if statement", but it looks like where you went wrong was in looping over all checkboxes then trying to sort out which was which inside the loop; the return false would prevent any but the first set from being reachable. The logic will be much easier to follow if you use more specific selectors for each loop instead of trying to break out with return false.

Below is a commented rewrite of your code that seems to work:

var subTotal, total;
$('input.value, input.pages').on('change', amountCalc);

function amountCalc() {
  var total = 0;
  
  // loop over every checked parent, skip the others
  $('.parent:checked').each(function() {
    var container = $(this).closest('.itemNest');

    // you never display the subTotal anywhere, so you could instead just
    // skip that and add to the total at every step; I left it in just in case
    var subTotal = 0;

    // find the "pages" value, or use 1 if it's a "single item" 
    var multiplier;
    if (container.find('.pages').length > 0) {
      // the || 0 prevents NaN input:
      multiplier = Number(container.find('.pages').val()) || 0
    } else {
      multiplier = 1;
    }

    // sum up the checked values within this container
    container.find('.value:checked').each(function() {
      subTotal += (Number($(this).val()) * multiplier)
    })
    total = total + subTotal;
  })

  $('.total').val(total);
  $('.totalPer130').val(total * 1.3);
  $('.totalPer70').val((total) - (total * 0.3));
}

// below code is unchanged from original

$('.category .itemNest').each(function() {
  var itemNest = this;
  //デフォルト　children選択不可
  $('input[name="children"]').prop('checked', false).prop('disabled', true);
  $('.category .itemNest').find('.parent').change(function() {
    //parentのチェック判別
    if ($('.parent', itemNest).prop("checked")) {
      $('input[name="children"]', itemNest).prop('disabled', false);
    } else {
      $('input[name="children"]', itemNest).prop('checked', false).prop('disabled', true);
    }
    amountCalc();
  });
});



  
    
      
        
          multiple items:
            pages
          
            100
            200
            300
          
        
        
          multiple items:
            pages
          
            100
            200
            300
          
        
      
    
  
  
    
      
        
          single item:
            
              100
          200
          300
          
        
      
    
  
  
    
      
        
          single item:
          
            100
            200
            300
          
          none
        
      
    
  

  
    
      Total : yen
    
    
      30% extra：yen
    
    
      30% discount：yen

(Note I made one small change to the HTML; you had a element wrapping both the numInput checkboxes and the "pages" input field; this meant that clicks on the input field would also unintentionally toggle the value of the checkbox. I moved the text field outside that label element.)

How to loop through an if statement that makes textboxes available for input?

Answers (1)

Related Questions