0

我必须根据选中和未选中的复选框来显示隐藏 td，如果选中了复选框，那么它 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>

我的 Telerik html:- 在此处输入图像描述

4

2 回答 2

0

请替换您的服务器代码并使用相关的 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 链接：https ://jsfiddle.net/karthikrab/76fuh8wt/

于 2020-05-27T11:49:13.947 回答
0

您需要始终如一地使用 jQuery。假设问题是您可以使用这些答案修复的 clientID 问题，您的代码应该是

$('#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>

于 2020-05-27T09:08:59.263 回答