0

ユーザーに入力してもらいたいフォームがあります.2つのラジオボタンが含まれており、それぞれを選択すると、ユーザーが入力するオプションがさらに表示されます-しかし、1つのラジオボタンをクリックすると、もう1つは、以前のフォーム情報（他のボタンに関連付けられている）がまだ残っています-ボタンの選択を解除すると、フォームフィールドも一緒に消えるようにコーディングする方法がわかりません。

以下にコードを示しますが、動作を確認できるようにjfiddle リンクも含めました。

形

<form action="" method="post" id="contactForm"> <strong><label for="box1" id="box1_label">name</label></strong>

    <br />
    <input type="text" name="box1" class="tentry" id="namae" tabindex="1" />
    <br />
    <div class="error" id="box1_error">
        <label for="box1">this field is required!</label>
    </div>  <strong>email</strong>

    <br />
    <input type="text" class="tentry" name="box2" id="tegami" tabindex="2" />
    <br />
    <div class="error" id="box2_error">
        <label for="box2">this field is required!</label>
    </div>  <strong>lets...</strong>

    <br />
    <input name="radio1" type="radio" id="client" value="work together" tabindex="3" />
    <label for="client">work together
        <label>&nbsp;
            <input name="radio1" type="radio" id="chatter" value="chit-chat" tabindex="4" />
            <label for="chatter">chat</label>
            <div class="error" id="radio1_error">
                <label for="radio1">you must select a button!</label>
            </div>
            <div id="clientBox" style="display: none;"> <strong><label for="website" id="website_label">website</label></strong>

                <br />
                <input type="text" class="tentry" name="website" id="web" value="http://" />
                <br />  <strong><label for="info" id="info_label">tell me about your project!</label></strong>

                <br />
                <textarea name="info" rows="6" cols="35" id="infoArea">so what do you need?</textarea>
            </div>
            <div id="chatterBox" style="display: none;">    <strong><label for="chatter" id="chatter_label">let's talk!</label></strong>

                <br />
                <textarea name="chatter" rows="6" cols="35" id="infoArea">what's on your mind?</textarea>
            </div>
            <br />
            <input type="submit" name="submit" class="button" id="submit_btn" value="Send" />
</form>

jQuery

//Display extra forms on radio button press
$('#client').click(function () {
    if ($('#client').is(':checked')) {
        $('#clientBox').show();
    } else {
        $('#clientBox').hide();
    }
});
$('#chatter').click(function () {
    if ($('#chatter').is(':checked')) {
        $('#chatterBox').show();
    }
});

前もって感謝します。

4

1 に答える 1

0

これはあなたのために働くはずです

$('#client').click(function () {
    $('#client').is(':checked')) {
        $('#clientBox').show();
        $('#chatterBox').hide();
    }
});
$('#chatter').click(function () {
    if ($('#chatter').is(':checked')) {
        $('#chatterBox').show();
        $('#clientBox').hide();
    }
});
于 2013-06-09T04:36:58.283 に答える