Question

我正在创建一个联系表单，我有两个输入，type="checkbox";第一个是电子邮件，已经过检查，但我想取消选中此项，如果用户选择“电话”选项，并显示输入电话号码的电话输入。

我希望你们能帮助我，我仍然是新手，但我学到了很多东西。

HTML 名称 *：

                <label for="">Email <span>*</span>:</label>
                <input type="email" placeholder="Email (Required)">

                <label for="">Got a question? <span>*</span>:</label>
                <textarea name="" id="" rows="1" placeholder="Got a question? (Required)"></textarea>

                <label for="">Best form to contact</label>

                <div>
                    <p>Email: </p>
                    <input type="checkbox" name="fruit" value="email" id="email2" checked>
                </div>

                <div>
                    <p>Phone: </p>
                    <input type="checkbox">

                    <input type="text" placeholder="Give us your phone" id="phonecheck" class="NoDisplayed"> 
                </div>

                <div class="SendButton">
                    <a href="" id="send">Send</a>
                </div>
            </form>
        </div>
    </div>

的Javascript

$('#ChatContainer').hide();
    $('.NoDisplayed').hide();

    $('#ChatToggle').click(function(){
        $('#ChatContainer').toggle('slow');
    });

谢谢。

Answer 1

试用此代码：

var $checkPhone = $('#checkPhone');
var $checkMail = $('#checkMail');
var $phonecheck = $('#phonecheck');

$checkPhone.change(function(data) {
    $checkMail.attr("checked", false);
    if (this.checked) {
        $phonecheck.show();
    }
    else {
        $phonecheck.hide();
    }
});

$checkMail.change(function(data) {
     $checkPhone.attr("checked", false);
     $phonecheck.hide();
});

从手机元素中移除课程NoDisplayed，然后按style="display: none;"

http://jsfiddle.net/dL36kccw/8/

<强>增加：用jQuery做这些事情并不是最容易的。您经常最终会在一些地方放置一些DOM操作，这使得代码不易维护（在这种情况下就像$phonecheck.hide();。

我强烈建议您查看Knockout或其他一些UI框架。可以在todoMVC上找到一个很好的框架+示例列表。我认为Knockout在很多情况下都是最好的。 Backbone也很有竞争力。但最终你需要找到一个反映你的需求和风格的。

编辑：修正了取消选中pohne的错误。

Answer 2

我建议使用无线电输入将您的“首选联系人”选项关联起来（因为“首选”是一个独家选择，而“可接受”可能包括所有可能的选项），给出：

<label for="">Best form to contact</label>
<div>
    <p>Email:</p>
    <input type="radio" name="contact" value="email" id="email2" checked="checked" />
</div>
<div>
    <p>Phone:</p>
    <input type="radio" name="contact" value="phone" />
    <input type="text" placeholder="Give us your phone" id="phonecheck" class="NoDisplayed" />
</div>

哪个适用于以下jQuery：

$('input[type="radio"][name="contact"]').on('change', function(){
    $('#phonecheck').toggle(this.value === 'phone');
});

JS Fiddle demo

值得注意的是，您的HTML有些问题;您的<label>元素与任何（更不用说“特定”）表单元素无关;您只是使用<label>提供表单的section-name（应在<legend>分组中使用<fieldset>属性）。也就是说，我已经更正了您的HTML 并将电话号码输入框移到了包含复选框的<div>之外（现在包含一个无线电输入），以减少<form>突然被取代的震动效应。仍然有点跳跃，但不是那么深刻。

这是经过修改的HTML，它仍然适用于上面的jQuery：

<div id="ContactForm">
    <div id="ChatToggle">
        <p>Contact Us</p>
    </div>
    <div id="ChatContainer">
        <form action="">
            <label>Name <span>*</span>:
                <input type="text" placeholder="Your Name (Required)" />
            </label>
            <label>Email <span>*</span>:
                <input type="email" placeholder="Email (Required)" />
            </label>
            <label>Got a question? <span>*</span>:
                <textarea name="" id="" rows="1" placeholder="Got a question? (Required)"></textarea>
            </label>
            <fieldset>
                <legend>Best form to contact</legend>
                <div>
                    <label>Email:
                        <input type="radio" name="contact" value="email" id="email2" checked="checked" />
                    </label>
                </div>
                <div>
                    <label>Phone:
                        <input type="radio" name="contact" value="phone" />
                    </label>
                </div>
                <input type="text" placeholder="Give us your phone" id="phonecheck" class="NoDisplayed" />
            </fieldset>
            <div class="SendButton">    <a href="" id="send">Send</a>

            </div>
        </form>
    </div>
</div>

JS Fiddle demo

参考文献：

CSS：
- Attribute-equals (attribute="value") selector。
HTML元素：
- <fieldset>。
- <label>。
- <legend>。
- <input />。
jQuery的：
- on()。
- toggle()。

Answer 3

您只需要处理手机的更改事件复选框：

$("#chkPhone").on("change", function () {
    $("#email2").prop("checked", !($(this).is(":checked")));
});

http://jsfiddle.net/dL36kccw/5/

Answer 4

// I have just added id (id -->"phone" to checkbox for corresponding phone number text box and    added style="display:none;" to phone number text

<label for="">Email <span>*</span>:</label>
<input type="email" placeholder="Email (Required)">

<label for="">Got a question? <span>*</span>:</label>
<textarea name="" id="" rows="1" placeholder="Got a question? (Required)"></textarea>

<label for="">Best form to contact</label>
<div>
<p>Email: </p>
<input type="checkbox" name="fruit" value="email" id="email2" checked>
</div>

<div>
<p>Phone: </p>
<input type="checkbox" id="phone">

<input type="text" placeholder="Give us your phone" id="phonecheck"   style="display:none;"> 
</div>
<div class="SendButton">
<a href="" id="send">Send</a>
</div>
</form>
</div>
</div>

// please try this script

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<script>

$('#phone').click(function(){
if($('#phone').is(':checked'))
{
$('#phonecheck').show();
}
else
{
$('#phonecheck').hide();
}
});
</script>

选中CheckBox时显示输入

4 个答案: