Доступ к строке на основе флажка, установленного в одной из ее ячеек

Question

На моем сайте asp.net я использую вложенные повторители. Внешний повторитель используется для отображения списка продуктов, а внутренний повторитель - для отображения дополнительных параметров, сопровождающих продукты.Эти повторители отображаются следующим образом:

<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>

В приведенном выше HTML-коде каждый элемент tr с классом productTextAlign имеет флажок и текстовое поле, которые отображаются следующим образом:

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

и каждый элемент trс классом «AdditionalOptions» имеет флажок, похожий на этот.

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

При щелчке по этому флажку я хотел бы проверить, если соответствующий флажок продукта (который находится в tr с классом «ProductTextAlign»)отмечен, и если это не так, я бы хотел выдать предупреждение, используя функцию jquery / javascript.

Но я не уверен, как получить доступ к строке, в которой установлен флажок, и, в свою очередь, получить доступ к флажку.в строке (с '.ProductTextAlign') где-то над этой строкой.

Может кто-нибудь помочь мне с этим?

Answer 1

Попробуйте это

function ConfirmProductChosen(chkBox){

   var productTr = $(chkBox).closest("tr").prevAll(".productTextAlign");

   if(productTr.find("input[*=productCheckBox]:checked").length){
     alert("It is checked");
   }

}

Answer 2

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