TAGS :Viewed: 4 - Published at: a few seconds ago

[ find single jquery descendant ]

I am having issues with something that seems like it should be pretty easy to do with JQuery. Basically I have a table on my page. Each row on the table has a check box and a cell for an amount. I am trying to write a function that will traverse each row and check to see if the checkbox is checked off. If so it will add the amount to my total so I can show it at the bottom of my page. For some reason I can't find my checkbox. Below is the html on the page.

<div class="BillAccordian">
<h3><A href="#">Past Due Bills - Total $ 1047.62 </A></h3>
<div>
    <table style="background-color:Red">


    <tr>
        <td>
            <input class="RowSelector" id="BillInfo_PastDueBills_0__Selected" name="BillInfo.PastDueBills[0].Selected" type="checkbox" value="true" />
            <input name="BillInfo.PastDueBills[0].Selected" type="hidden" value="false" /> 
        </td>
    <td>
        RE 
    </td>
    <td>
        334 
    </td>

    <td>
        1047.62 
    </td>
    <td>
        Bill Number 20121 
    </td>
</tr> 
        </table>
    </div>
</div> 

Here is the JQuery script I am using right now to try to accomplish this

$('input.RowSelector').click(function () {
        var sum = 0;
        alert("1");
        // we want to sum up the values of all input.sum elements that are in the same tr
        // as this one
        $('tr').each(function (e) {
            var val;
            alert($(this).find(".RowSelector")[0].is(':checked'));
            if ($(this).closest("input.RowSelector").val() == true) {
                alert("3");
                //                val = parsefloat($(i).find(".BillAmount").val());
                //            
                //                if (isNaN(val) || val === undefined) {
                //                    return;
            }

            //                sum += val;
        });
        //            $(this).find('#SelectedTotal').val(formatDollar(sum));
    });
}); 

A lot of it is commented out right now becuase I am just tyring to get a hold of the selector I need to continue on. Using the alert in the function I get nothing. I think it does not like the [0] I tacked on but using find wihtout it I kept getting back nothing. I did check my $this.html to make sure i had the correct element and it did return the entire table row with the checkbox inside so I am stumped at this point. Can someone tell me what I am missing?

Thanks

Answer 1


$('tr').each(function (e) {
   if ($(this).find('input:checked').length > 0)
   {
      // Do calculation
   }
}

Answer 2


You could do

$('tr').each(function (e) {
        var val = 0;

        if ($('input:checkbox:checked', this).length > 0){
             val = parseInt($('td:eq(3)', this).text(), 10);
        }


        sum += val;
    });

Answer 3


Us this to find your checked checkbox:

$('input.RowSelector').click(function() {
    var sum = 0;
    $('tr').each(function(e) {
        var val;
        if ($(this).find(".RowSelector:checked").val() == "true") {
            alert("3");

        }
    });
});‚Äč