选中复选框时显示文本答案

【问题标题】：display text when checkbox is checked选中复选框时显示文本
【发布时间】：2013-08-08 21:33:11
【问题描述】：

选中复选框时，我需要显示一行文本。我知道这很简单，但我是新手，当我尝试阅读此问题的其他答案时，我会迷路。

这就是我所拥有的：

 function RiskPlanRqd()
  {
    $('#RiskMgmt').click(function()
    {
        if ($("#RiskMgmt").is(':checked')) 
        {
            $(".togglevisibility").show();
        } 
        else 
        {   
            $(".togglevisibility").hide();
        }
    }       )
  }

然后对于我拥有的复选框：

<input type="checkbox" id="RiskMgmt" />Risk Management Plan<br />

如果选中我想显示的文本，我有：

<td> <id="PlanStatus"; class="togglevisibility">Plan Status: </td>

【问题讨论】：

我已编辑您的问题以显示 HTML。我也正确关闭了开头的<td>标签（添加>字符）。如果这被省略，你的 HTML 无效，所以我假设这是一个错字。如果 not 那么你的问题是无效的 HTML，你应该回滚问题。此外，您缺少 = 字符来为您的 input HTML 标记中的属性分配值，这也使得 that 无效 HTML。
@DavidThomas 仍在寻求帮助，如果您能提供任何关于上面显示的内容的见解

标签： jquery html checkbox

【解决方案1】：

快速修复...

您可以通过修复错字和值检查来解决此问题...

if ($("#RiskMgmtPlan").val() == '1') 应该是if ($("#RiskMgmt").is(':checked')

Function 也应该是 function。

您还在复选框上打错了 ID 声明。

但是，您可以使用 lambda...

$('#RiskMgmt').click(function(){
    if ($("#RiskMgmt").is(':checked')) {
        $("#PlanStatus").show();
        $("#CreatePlan").show();
        $("#NotStarted").show();
    } else {
        $("#PlanStatus").hide();
        $("#CreatePlan").hide();
        $("#NotStarted").hide();
    }
});

而且，您可以通过分配类来删除 4 行代码...

将class='togglevisibility'添加到您要显示和隐藏的三个元素中，然后将上面的内容更改为：

$('#RiskMgmt').click(function(){
    if ($("#RiskMgmt").is(':checked')) {
        $(".togglevisibility").show();
    } else {
        $(".togglevisibility").hide();
    }
});

【讨论】：

复选框应该是...... 风险管理计划
@Dani 你需要一个介于id 和"RiskMgmt" 之间的=。如果由我决定，我会删除 onClick='RiskPlanRQD();' 并使用建议的第三个选项。
那么初始函数应该是：function RiskPlanRqd() { if ($("#RiskMgmtPlan").is(':checked') { $("#PlanStatus").show(); $("#CreatePlan").show(); $("#NotStarted").show(); } else { $("#PlanStatus").hide(); $("#CreatePlan").hide() ; $("#NotStarted").hide(); }
@Dani 将 $("RiskMgmtPlan").is(":checked") 更改为 $("RiskMgmt").is(":checked")。现在，您的函数正在寻找 ID 为 RiskMgmtPlan 的元素，但您的复选框名为 RiskMgmt。
@LightningDust Welp，学习新知识，感谢您指出这一点。在我发表评论之前没有阅读更多内容是我的错！

【解决方案2】：

简化版..绑定事件，然后根据复选框状态切换可见性。

$('#RiskMgmt').change(function(e) {
    $("#PlanStatus, #CreatePlan, #NotStarted").toggle(this.checked);
});

【讨论】：

【解决方案3】：

jQuery(document).ready(function ($) {
    $('#RiskMgmt').bind('click',RiskPlanRqd);
});

应该可以。

或者：

<input type="checkbox" value "1" id="RiskMgmt" onclick="RiskPlanRqd();" />Risk Management Plan<br />

应该也可以。

【讨论】：

-1：不知道你是如何获得支持的，你没有发现他的书面功能被破坏了。你帮他做的只是将一个损坏的函数绑定到一次点击。

【解决方案4】：

试试这个：

$('#RiskMgmt').click(function(){
  if (this.checked) 
  {
    $("#PlanStatus").show();
    $("#NotStarted").show();    
  }
});

这应该不会更难，如果复选框被选中，显示任何你想要的。

【讨论】：