javascript - 如果勾选复选框并隐藏字段，则将匿名电子邮件添加到字段

Question

我有一个反馈表，允许人们提交反馈，但是我想让用户选择保持匿名，问题是我的 CMS 必须将电子邮件和姓名作为必填字段，所以我想添加一个虚拟如果他们希望匿名，请输入姓名和电子邮件电子邮件，然后隐藏该字段。它看起来像这样:

<input type="checkbox" class="anon"> 

如果勾选，则将名称“Remain Anonymous”添加到名称字段并将 anon@anonymous.com 添加到电子邮件字段，然后隐藏 div.remain-anonymous。如果未选中，则再次显示 div 并再次将字段清除为空白。如果再次勾选等，请再次执行相同的操作。

<form>

    <div class="remain-anonymous">
        <input type="text" value="Name" class="name-field">
        <input type="text" value="Email" class="email-field">
    </div>

    <textarea placeholder="Feedback comments"></textarea>

    <input type="submit" value="Submit">

</form>

Answer 1

你可以试试下面的 JQuery 来实现你想要的。

$(document).ready(function () {

    $(".anon").on("click", function () {
        var $this = $(this);

        if ($this.is(':checked')) {
            $(".name-field").val("Remain anonymus");
            $(".email-field").val("anon@anonymous.com");
            //comment this to see the fields set.
            $(".remain-anonymous").hide();

        } else {
            $(".name-field").val("Name");
            $(".email-field").val("Email");
            $(".remain-anonymous").show()
        }
    });
});

check out the same code in the JSFiddle . click here