Question

我使用wordpress，联系表格7，

<p>Contact: [checkbox checkbox-932 "email" "Other"]</p>

<p>Other: [text text-327 placeholder]</p>

我只想在用户检查其他选项时显示其他选项。你能这样做吗？

Answer 1

正如doublesharp指出的那样，这是通过JavaScript实现的。

鉴于此HTML：

<input type="checkbox" id="chkEmail" name="contact" value="email">E-Mail<br>
<input type="checkbox" id="chkOther" name="contact" value="other">Other<br>
<input type="text" id="chkOtherText" name="OtherText">

您将使用以下JavaScript：

var chkBox = document.getElementById("chkOther");
var chkBoxTxt = document.getElementById("chkOtherText");

chkBoxTxt.style.display = "none";
chkBoxTxt.setAttribute("aria-hidden", "true");

function toggleOtherText() {
    if (chkBox.checked == true) {
        chkBoxTxt.style.display = "block";
        chkBoxTxt.setAttribute("aria-hidden", "false");
    } else {
        chkBoxTxt.style.display = "none";
        chkBoxTxt.setAttribute("aria-hidden", "true");
    }
}

chkBox.addEventListener("click", toggleOtherText, false);

您必须根据插件的输出修改脚本。

Answer 2

我已在显示联系表单的页面中编写以下代码。

$(document).ready(function(){
     $('#moreinfo').hide();
    $('#more input').change(function(){
        if(this.checked)
            $('#moreinfo').show();
        else
            $('#moreinfo').hide();

    });
});

我需要显示的字段，我已将它们放在contact-form-7表单构建器页面中的div中，您需要使用短代码定义字段;

    <div class="form-group"> 
        [checkbox more id:more "Help us to know your requirements better"]</div>
        <div id="moreinfo">
        <div class="row">
<div class="form-group col-sm-6"> 
Property Requirement [select property_required class:form-control "Immediate" "15 Days" "1 Month" "6 Months" "1 Year"] 
</div>
</div>
</div>

请勿忘记将id提供给复选框字段。

如何根据选择另一个表单字段显示和隐藏表单字段？

2 个答案: