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 Fiddle

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

当选中第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会显示一个额外的右括号，括号和分号'}）;'。删除此语法错误，您应该在选中复选框时看到“测试数据”标题，并在未选中时隐藏。此外，由于您似乎希望在未选中复选框时隐藏“测试数据”，您需要先隐藏它或最初检查相应的框。

Here is a JSFiddle您的代码最初隐藏了标题，并且点击功能已经过重新设计以使用.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;
}

这是workin demo

Answer 5

我删除了这部分

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

现在似乎正在运作。不确定，但命名空间“s”可能在这里有冲突。

这是更新的小提琴

jsfiddle.net/hVWYg/12 /

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

5 个答案: