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

我有一个输出表单（在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>

电话（必选）
您是代理人吗
请提供您的代理号码
您是保单持有人吗
请提供您的社会保险号码的最后4位数字
保单编号（如已知）
消息

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

---

如果您有任何帮助，我们将不胜感激。

在复选框中添加一个单击回调，在默认情况下隐藏数字输入，在单击时切换输入：

与此类似：

HTML:

JS:

---

默认情况下，更改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>

这里是它的小提琴：

如果JQuery可用，则JavaScript会变得更简单：

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

这是一把小提琴：

---

注意：您可以使用上述任意一种JavaScript，而不是两者都使用。我还要指出，您的

id

标记不是很具有描述性，但这是您的选择。

您的问题是什么？您尝试了什么？显示选中哪个复选框时输入的文本？您能只显示生成最小测试用例所需的最小代码吗？这完全完成了工作，而不需要更改输出。我没有使用代理号码列表，但坚持使用现有的ID。非常感谢。

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

<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>

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

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

        };
    };
})();

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