Using sum of checked items’ values from wordpress loop

3 Views

I tried to place this code in wordpress loop: it should check checkbox’s status for each post by id and if they checked – update value of textarea (it should to update after each click on checkboxes).
but it catch value of the last post only.. although it looks right in page-view-source (all IDs on its places) 

<!--wp loop begin-->
<!--post content-->
  <script>    
    $('.taglist input').click(function() {
    var sum=0;
    if (document.getElementById('<?php the_ID(); ?>').checked){sum+=1000;}     
    $('textarea').val(sum)
    ;}
    );
  </script>
<!--wp loop end-->
Post Views: 3

Related posts

Leave a Reply

2 comments

  1. You should place this code outside the loop and bind the click on each element, as you are already doing:

    <!--wp loop begin-->
<!--post content-->

<!--wp loop end-->
<script>    
    $('.taglist input').click(function() {
        var sum=0;
        if ($(this).checked){
                sum+=1000;
        } 
        $('textarea').val(sum);
    });
</script>

    But I think you would want to do more something like this:

    <!--wp loop begin-->
<!--post content-->

<!--wp loop end-->
<script>   
var sum = 0;
$('.taglist input').click(function() {
    if ($(this).prop('checked')){
        sum+=1000;
    } else {
        sum-=1000;
    }
    $('textarea').val(sum);
});
</script>

    If checkbox is unchecked .. I think it should subtract.

    JSFiddle

  2. You need to declare your sum variable outside of the wordpress loop.

    <script>var sum = 0;</script>
<!--wp loop begin-->
<!--post content-->
  <script>    
    $('.taglist input').click(function() {
        if (document.getElementById('<?php the_ID(); ?>').checked) {
             sum+=1000;
        } else {
            sum-=1000;
        }
        $('textarea').val(sum);
    });
  </script>
<!--wp loop end-->

    Also, I’m guessing you need to remove 1000 from the sum if someone unchecked a checkbox.

    Actually, a neater way might be to add the php id variable to an array in the loop, and then do everything else outside the loop – 

    <script>
    var sum = 0;
    var checkboxIdArray = [];
</script>
<!--wp loop begin-->
<!--post content-->
  <script>
    checkboxIdArray.push('<?php the_ID(); ?>');
  </script>
<!--wp loop end-->
<script>

    $('.taglist input').click(function() {
        var id = $(this).attr('id');
        if (typeof checkboxIdArray[id] !== 'undefined') {
            if ($(this).prop('checked')) {
                sum+=1000;
                } else {
                    sum-=1000;
                }
            $('textarea').val(sum);
        }
    });

</script>

    UPDATE

    OK, You don’t need to use the php variable at all – you just need the to use $(this) inside the click callback, as suggested by Mihai Iorga.