使用基于复选框检查和取消选中的javascript显示隐藏td答案

【问题标题】：Show hide td using javascript based on checkbox check and uncheck使用基于复选框检查和取消选中的javascript显示隐藏td
【发布时间】：2020-05-27 19:49:13
【问题描述】：

我必须根据选中和未选中的复选框来显示 hide 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:-

【问题讨论】：

我给你做了一个sn-p。请删除所有服务器代码并替换为相关的 HTML
为什么还有 jQuery 和 DOM 访问权限？
也许是这个：stackoverflow.com/questions/12614042/…
@mplungjan 是的，有 jQuery 访问权限

标签： javascript html asp.net

【解决方案1】：

您需要始终如一地使用 jQuery。假设问题是您可以使用 these answers 修复的 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>

【讨论】：

我收到错误：Uncaught TypeError: $(...).on is not a function
正如我所说，您需要修复您的 ID。
使用 ClientIDMode="Static" 修复了 Ids 但仍然是同样的问题
请发布您的 Telerik 生成的 HTML 示例。
我在主要问题中添加了 Telerik html 的图片

【解决方案2】：

请替换您的服务器代码并使用相关的 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/

【讨论】：