Question

我有一个输出表单（在Wordpress中使用cforms），我想显示另一个文本框，具体取决于是否选中了复选框。

E.g。你是代理人吗？（是/否）。如果是（已选中）显示＆＃39;请输入您的号码＆＃39;。

    <ol class="cf-ol">
        <li id="li--5" class=""><label for="cf_field_5"><span>Phone</span></label><input name="cf_field_5" id="cf_field_5" class="single fldrequired" value="" type="text"><span class="reqtxt">(required)</span></li>
        <li id="li--6" class=""><label for="cf_field_6" class="cf-before"><span>Are you an agent?</span></label><input name="cf_field_6" id="cf_field_6" class="cf-box-b" type="checkbox"></li>
        <li id="li--7" class=""><label for="cf_field_7"><span>Please provide your agent number</span></label><input name="cf_field_7" id="cf_field_7" class="single" value="" type="text"></li>
        <li id="li--8" class=""><label for="cf_field_8" class="cf-before"><span>Are you a policy owner</span></label><input name="cf_field_8" id="cf_field_8" class="cf-box-b" type="checkbox"></li>
        <li id="li--9" class=""><label for="cf_field_9"><span>Please provide the last 4 digits from your social security number</span></label><input name="cf_field_9" id="cf_field_9" class="single" value="" type="text"></li>
        <li id="li--10" class=""><label for="cf_field_10"><span>Policy number (if known)</span></label><input name="cf_field_10" id="cf_field_10" class="single" value="" type="text"></li>
        <li id="li--11" class=""><label for="cf_field_11"><span>Message</span></label><textarea cols="30" rows="8" name="cf_field_11" id="cf_field_11" class="area"></textarea></li>
    </ol>

这是漫长的一天，我真的很难让这个工作！我试过使用this example但却失败了！

感谢任何帮助。

Answer 1

向复选框添加点击回调，默认情况下隐藏号码输入，点击时切换输入：

与此类似：http://jsfiddle.net/seibert_cody/7agdf65p/？

HTML：

<ol>
    <li>
        <label for="cf_field_7">
            <span>Please provide your agent number</span>
        </label>
        <input name="cf_field_6" id="cf_field_6" class="cf-box-b" type="checkbox">

        <ol id="agent_number_sub_list" type="a">
            <li>
                <label for="cf_field_7">
                    <span>Please provide your agent number</span>
                </label>
                <input name="cf_field_7" id="cf_field_7" class="single" value="" type="text">
            </li>
        </ol>
    </li>
</ol>

CSS：

#agent_number_sub_list{
    display: none;
}

JS：

$(document).ready(function(){
    $("#cf_field_6").click(function(){
        $("#agent_number_sub_list").toggle();
    });
});

Answer 2

更改HTML以默认隐藏li：

<ol class="cf-ol">
    <li id="li--5" class=""><label for="cf_field_5"><span>Phone</span></label><input name="cf_field_5" id="cf_field_5" class="single fldrequired" value="" type="text"><span class="reqtxt">(required)</span></li>
    <li id="li--6" class=""><label for="cf_field_6" class="cf-before"><span>Are you an agent?</span></label><input name="cf_field_6" id="cf_field_6" class="cf-box-b" type="checkbox"></li>
    <li id="li--7" style="display: none"><label for="cf_field_7"><span>Please provide your agent number</span></label><input name="cf_field_7" id="cf_field_7" class="single" value="" type="text"></li>
    <li id="li--8" class=""><label for="cf_field_8" class="cf-before"><span>Are you a policy owner</span></label><input name="cf_field_8" id="cf_field_8" class="cf-box-b" type="checkbox"></li>
    <li id="li--9" class=""><label for="cf_field_9"><span>Please provide the last 4 digits from your social security number</span></label><input name="cf_field_9" id="cf_field_9" class="single" value="" type="text"></li>
    <li id="li--10" class=""><label for="cf_field_10"><span>Policy number (if known)</span></label><input name="cf_field_10" id="cf_field_10" class="single" value="" type="text"></li>
    <li id="li--11" class=""><label for="cf_field_11"><span>Message</span></label><textarea cols="30" rows="8" name="cf_field_11" id="cf_field_11" class="area"></textarea></li>
</ol>

然后添加JavaScript以隐藏/显示LI，因为选中/取消选中复选框：

(function () {
    window.onload = function () {
        document.getElementById("cf_field_6").onclick = function () {

            document.getElementById("li--7").style.display = this.checked ?
                null :
            "none";

        };
    };
})();

以下是它的小提琴：http://jsfiddle.net/e8sqk1h4/

如果你有JQuery可用，那么JavaScript变得更简单了：

$(function () {
    $("#cf_field_6").click(function () {
        $("#li--7").css("display", this.checked ? "" : "none");
    });
});

这是小提琴：http://jsfiddle.net/axt6kcc9/1/

注意：您可以使用上面给出的JavaScript的，而不是两者。我还要注意，您的id代码不是很具描述性，但这是您的选择。

根据复选框显示和隐藏表单字段（li）

2 个答案: