Question

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

代码如下，但我还添加了jfiddle link，以便您可以看到它的实际效果。

形式

<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();
    }
});

提前致谢。

Answer 1

这应该对你有用

$('#client').click(function () {
    $('#client').is(':checked')) {
        $('#clientBox').show();
        $('#chatterBox').hide();
    }
});
$('#chatter').click(function () {
    if ($('#chatter').is(':checked')) {
        $('#chatterBox').show();
        $('#clientBox').hide();
    }
});

单选按钮取消选择但形式仍然出现？

1 个答案: