javascript - 显示和隐藏依赖于复选框的表单字段 (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();
    });
});