为父行单元格添加边框

Question

我的问题是：

1. 当我选择“是”时 - 我仅在带有复选框“是”的单元格中的单元格周围有边框线 - 我需要更改它以选择所有行。

2. 当我选择“是”时 - 我需要显示错误消息 - 但它不起作用。我该如何改变它？

// YES
$('[id^="id_0-medical_question"][id$="_0"]').click(function() {
  $(this).parent().parent().css({
    'border': '2px solid #da4f49'
  });
  $(this).parent().parent().find('.medical_error_message').html('Error - you not like this');
});
// NO
$('[id^="id_0-medical_question"][id$="_1"]').click(function() {
  $(this).parent().parent().css({
    'border': '1px solid #ddd',
    'color': '#000000',
    'font-weight': 'normal'
  });
  $(this).parent().parent().find('.medical_error_message').html('');
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

<table class="table">
  <tbody>
    <tr>
      <td class="medical_question"><b>1. Do you like</b></td>
      <td>YES</td>
      <td>NOW</td>
    </tr>

    <tr>
      <td class="medical_question">
        1. Red hair
        <p class="medical_error_message"></p>
      </td>

      <td style="border: 2px solid rgb(218, 79, 73);"><label for="id_0-medical_question1_0"><input type="radio" name="0-medical_question1" value="1" required="" id="id_0-medical_question1_0">
     YES</label>
      </td>

      <td><label for="id_0-medical_question1_1"><input type="radio" name="0-medical_question1" value="0" required="" id="id_0-medical_question1_1">
     NO</label>
      </td>
    </tr>

    <tr>
      <td class="medical_question">
        2. Blond hair
        <p class="medical_error_message"></p>
      </td>

      <td><label for="id_0-medical_question2_0"><input type="radio" name="0-medical_question2" value="1" required="" id="id_0-medical_question2_0">
     YES
    </label>
      </td>

      <td><label for="id_0-medical_question2_1"><input type="radio" name="0-medical_question2" value="0" required="" id="id_0-medical_question2_1">
     NO</label>
      </td>
    </tr>

Answer 1

我认为你的 jQuery 是错误的。选择 YES 时，您需要更新 jQuery 选择器以定位所有行。

这是您的更新代码：

$(document).ready(function() {
  // YES
  $('[id^="id_0-medical_question"][id$="_0"]').change(function() {
    if ($(this).is(':checked')) {
      $('.medical_question').css({
        'border': '2px solid #da4f49'
      });
      $('.medical_error_message').html('Error - you do not like this');
    }
  });

  // NO
  $('[id^="id_0-medical_question"][id$="_1"]').change(function() {
    if ($(this).is(':checked')) {
      $(this).closest('tr').find('.medical_question').css({
        'border': '1px solid #ddd',
        'color': '#000000',
        'font-weight': 'normal'
      });
      $(this).closest('tr').find('.medical_error_message').html('');
    }
  });
});