根据复选框显示和隐藏表单字段 (li)

Question

我有一个输出表单（在 Wordpress 中使用 cforms），我想根据复选框是否被选中显示另一个文本框。

例如你是代理吗？ （是/否）。如果是（选中）显示“请输入您的号码”。

    <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 标签描述性不是很强，但这是您的选择。