jquery - jquery在使用复选框时显示/隐藏html内容

Question

我正在尝试使用 jquery 显示/隐藏 html 内容......这是代码：

HTML：

<table width="1077" border="0" cellspacing="4" cellpadding="4">
    <tr>
        <td height="100%">&nbsp;</td>
        <td id="headerText">
            <h2>enter details below</h2>
        </td>
        <td width="17" rowspan="3" valign="top" id="headerText"></td>
        <td id="headerText">
            <h2 id="section"> test data</h2>
        </td>
    </tr>
    <tr>
        <td width="1" height="100%">&nbsp;</td>
        <td width="531" id="bodyText">more information</td>
        <td width="476" id="bodyText"></td>
    </tr>
    <tr>
        <td height="150">&nbsp;</td>
        <td valign="top">
            <table width="100%" border="0" cellspacing="1" cellpadding="1">
                <tr>
                    <td width="7%" id="bodyText2">
                        <label for="zip2">
                            <input type="checkbox" name="check_medical2" id="check_medical2">
                        </label>
                    </td>
                    <td width="93%">
                        <label for="textfield3"></label>
                        <label for="people3" id="bodyText">section 1</label>
                    </td>
                </tr>
                <tr>
                    <td height="10" colspan="2" id="bodyText2"></td>
                </tr>
                <tr>
                    <td id="bodyText2">
                        <input type="checkbox" name="check_dental2" id="check_dental2">
                    </td>
                    <td id="bodyText">section 2</td>
                </tr>
                <tr>
                    <td height="10" colspan="2" id="bodyText5"></td>
                </tr>
                <tr>
                    <td id="bodyText2">
                        <input name="check_life_insurance2" type="checkbox" id="check_life_insurance2">
                    </td>
                    <td id="bodyText">section 3</td>
                </tr>
            </table>
            <table width="100%" border="0" cellspacing="2" cellpadding="2">
                <tr>
                    <td width="30%"></td>
                    <td width="43%">&nbsp;</td>
                    <td width="27%">&nbsp;</td>
                </tr>
            </table>
            <p>&nbsp;</p>
        </td>
        <td valign="top">
            <br>
        </td>
    </tr>
</table><s:submit value="submit" name="submit" />

jQuery：

$('#check_life_insurance2').on("click", function () {
    if ($('#check_life_insurance2').prop("checked")) {
        $('#section').show();
    } else {
        $('#section').hide();
    }
});

JS小提琴。

有人可以告诉我哪里出错了。

检查第3节时，检查了。应显示测试数据。但由于某种原因它失败了。

感谢您的帮助

Answer 1

您的代码应如下所示...

$('#check_life_insurance2').on("click", function() {

    if ($(this).prop("checked")) {
        $('#section').show();
    }
    else {
        $('#section').hide();
    }

 });

Answer 2

如果您只想根据一个复选框控制一个元素的可见性，您可以执行以下操作：

$('#check_life_insurance2').on("click", function() {
    var checked  = $(this).prop("checked");
    var toToggle = $('#section');
    checked ? toToggle.hide() : toToggle.show();
});

我个人喜欢将选择器组合在函数的头部，以便于维护。

Answer 3

您的 JavaScript 中有语法错误。对您的 JSFiddle 运行 JSHint 会显示一个额外的右括号、括号和分号 '});'。删除此语法错误，您应该会在选中复选框时看到“测试数据”标题显示，并在未选中时隐藏。此外，由于您似乎希望在未选中复选框时隐藏“测试数据”，因此您需要最初隐藏它或最初选中相应的框。

这是您的代码的 JSFiddle，最初隐藏了标题，并且重新设计了 click 函数以利用 .toggle 函数，以下是相关部分：

<h2 style="display:none" id="section"> test data</h2>


$('#check_life_insurance2').on("click", function () {
        $('#section').toggle($('#check_life_insurance2').prop("checked"));
});

Answer 4

像这样改变你的JS：

$('#check_life_insurance2').on("click", function() {
        if ($(this).prop("checked")) {
            $('#section').show();
        }
        else {
            $('#section').hide();
        }
    });

如果您希望从一开始就隐藏它，请在您的 CSS 上使用：

#section{
    display:none;
}

这是工作演示

Answer 5

我删除了这部分

"<s:submit value="submit" name="submit" />"

它现在似乎正在工作。不确定，但名称空间“s”可能在这里发生冲突。

这是更新的小提琴

jsfiddle.net/hVWYg/12/