0

我有一个希望用户填写的表单，它包含两个单选按钮，当每个单选按钮被选中时，它会为用户提供更多选项来填写 - 但是当我单击一个单选按钮时，选择另一个，以前的表单信息（与另一个按钮相关联）仍然存在 - 我不确定如何对其进行编码，以便在取消选择按钮时，表单字段也会随之消失。

代码在下面，但我还包含了一个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 回答