Показать скрыть td, используя javascript на основе флажка, и снимите флажок

Question

Мне нужно показать hide td на основе установленного и снятого флажка, если флажок установлен, он должен быть видимым, иначе он не должен быть виден.

Код не показывает ошибки, но Показать и скрыть не работает.

function myFunction() {
  var checkBox = document.getElementById("<%=chkrecurring.ClientID%>");
  tddays = $('#<%=tddays1.ClientID %>'); //document.getElementById("< %=tddays1.ClientID%>");
  alert(tddays);
  if (checkBox.checked == true) {
    //tddays.style.display = "block";
    tddays.show();
  } else {
    //tddays.style.display = "none";
    tddays.hide();
  }

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tr>
    <td>
      <label class="label-data">
                Recurring:
            </label>
      <asp:CheckBox runat="server" ID="chkrecurring" onclick="javascript:myFunction();" />
    </td>
    <td id="tddays1" runat="server">
      <label class="label-data">
                No. of Days:<span class="red-txt">*</span>
            </label>
      <telerik:RadNumericTextBox runat="server" ID="txtDays" MaxLength="4" CssClass="form-control">
        <NumberFormat GroupSeparator="" DecimalDigits="0" />
      </telerik:RadNumericTextBox>
      <asp:RequiredFieldValidator runat="server" ID="reqdays" ControlToValidate="txtDays" ErrorMessage="Please enter number of days." ValidationGroup="valGrpAPat" Display="None">
      </asp:RequiredFieldValidator>
    </td>
  </tr>

</table>

Мой телерик html: -

Answer 1

Пожалуйста, замените коды серверов и используйте соответствующие теги HTML. Это устранило проблему для меня.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tr>
    <td>
      <label class="label-data">
                Recurring:
            </label>
      <input type='checkbox' runat="server" ID="chkrecurring" onclick="javascript:myFunction();" checked/>
    </td>
    <td id="tddays1" runat="server">
      <label class="label-data">
                No. of Days:<span class="red-txt">*</span>
            </label>
      <telerik:RadNumericTextBox runat="server" ID="txtDays" MaxLength="4" CssClass="form-control">
        <NumberFormat GroupSeparator="" DecimalDigits="0" />
      </telerik:RadNumericTextBox>
      <asp:RequiredFieldValidator runat="server" ID="reqdays" ControlToValidate="txtDays" ErrorMessage="Please enter number of days." ValidationGroup="valGrpAPat" Display="None">
      </asp:RequiredFieldValidator>
    </td>
  </tr>

</table>

function myFunction() {
  var checkBox = document.getElementById("chkrecurring");
  tddays = document.getElementById("tddays1");
  if (checkBox.checked == true) {
    tddays.style.display = "block";
  } else {
    tddays.style.display = "none";
  }

}

JSFiddle Link: https://jsfiddle.net/karthikrab/76fuh8wt/

Answer 2

Вам нужно постоянно использовать jQuery. Предполагая, что проблема связана с идентификатором клиента, который вы можете исправить, используя эти ответы , ваш код должен быть

$('#chkrecurring').on('change', function() {
  $('#tddays1').toggle(this.checked)
})

#tddays1 {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tr>
    <td>
      <label class="label-data">Recurring:<input type="checkbox" id="chkrecurring" /></label>
    </td>
    <td id="tddays1">
      <label class="label-data">No. of Days:<span class="red-txt">*</span>
        <input type="number" id="txtDays" maxlength="4" class="form-control">
      </label>
    </td>
  </tr>
</table>