Question

In my asp.net website I am using nested repeaters.Outer repeater is used to display a list of products and inner repeater is used to display additional options accompanying the products.
These repeaters are rendered as following

<table class= “productslist”>
<tbody>
<tr>....</tr>
<tr>....</tr>
<tr class=”productTextAlign”>  ......</tr>
<tr class=”additionalOptions”> ..... </tr>
<tr class=”additionalOptions”>.....</tr>

<tr class=”additionalOptions”>.....</tr>

<tr class=”additionalOptions”>.....</tr>

<tr class=”additionalOptions”>.....</tr>
<tr>...</tr>

<tr class=”productTextAlign”></tr>

<tr class=”additionalOptions”>.....</tr>

<tr class=”additionalOptions”>.....</tr>

<tr class=”additionalOptions”>.....</tr>

<tr class=”additionalOptions”>.....</tr>
</tbody>
</table>

In the HTML above, each tr with class ‘productTextAlign’ has got a checkbox and textbox which are rendered like this

<td>
<input type=”checkbox” id =”ProductRepeater_productCheckBox_0”......>
</td>
<td class=”numberRequired”>
<input type=”text” id=”ProductRepeater_numberRequired_0”......>
</td>

and each tr with class ‘additionalOptions’ has a checkbox rendered similar to this.

<input type=”checkbox” id =”OptionsRepeater_optionCheckBox_0” onclick=”ConfirmProductChosen(this)"......>

On the click of this checkbox I would like to check if the associated Product checkbox(which is in the tr with class ‘ProductTextAlign’) is checked and if its not I would like to throw an alert using a jquery/javascript function.

But I am not sure how to access the row in which the checkbox is checked and in turn get access to the checkbox in the row(with ‘.ProductTextAlign’) somewhere above this row.

Could someone please help me with this?

Answer 1

// bind the click event to checkboxes within .additionalOptions
$(".additionalOptions input:checkbox").click(function() {

    // find the closest .additionalOptions tr and then find the closest previous sibling
    // with the .productTextAlign class, then find the checkbox within
    var $checkbox = $(this).closest(".additionalOptions").prevAll(".productTextAlign").find("input:checkbox");

    // if the checkbox is checked, fire the alert
    if (!$checkbox.is(":checked"))
        alert("Totally checked");
}