1

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 のチェックボックスをオンにすると、テスト データが表示されます。しかし、何らかの理由で失敗しています。

ご協力いただきありがとうございます

4

5 に答える 5

1

コードは次のようになります...

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

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

 });
于 2013-06-18T19:36:36.767 に答える
1

1 つのチェック ボックスのみに基づいて 1 つの要素の可視性のみを制御したい場合は、次のようにすることができます。

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

個人的には、保守を容易にするために、セレクターを関数の先頭にグループ化するのが好きです。

于 2013-06-18T19:43:22.173 に答える
0

この部分を外しました

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

それは今働いているようです。確かではありませんが、名前空間「s」がここで競合している可能性があります。

これが更新されたフィドルです

jsfiddle.net/hVWYg/12/

于 2013-06-18T20:06:23.140 に答える
0

JS を次のように変更します。

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

最初から非表示にしたい場合は、CSS でこれを使用します。

#section{
    display:none;
}

動作デモはこちら

于 2013-06-18T19:39:33.420 に答える
0

JavaScript に構文エラーがあります。JSFiddle に対して JSHint を実行すると、追加の閉じ括弧、括弧、およびセミコロン '});' が明らかになります。この構文エラーを削除すると、チェックボックスをオンにすると「テスト データ」ヘッダーが表示され、オフにすると非表示になります。さらに、チェックボックスがチェックされていないときに「テストデータ」を非表示にしたいように見えるため、最初に非表示にするか、対応するボックスを最初にチェックする必要があります。

これは、ヘッダーが最初は非表示で、クリック関数が .toggle 関数を利用するように作り直されたコードの JSFiddleです。関連する部分は次のとおりです。

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


$('#check_life_insurance2').on("click", function () {
        $('#section').toggle($('#check_life_insurance2').prop("checked"));
});
于 2013-06-18T19:35:01.413 に答える