Javascript隐藏div不想显示在表单上

标签 javascript html forms

我有一个通过表单上的内联样式隐藏的 div。我希望当用户选中“其他”复选框时显示 div。有人会看我的代码吗?这是行不通的。我认为这可能对我的标记有影响,但如果是 JavaScript 代码,请告诉我。感谢您的帮助。

html:

<div class="item">
   <label>How did you hear about us? <span class="req">*</span></label>
   <br />
   <input type="checkbox" value="Newspaper" id="CAT_Custom_510976_0" name="CAT_Custom_510976" />
   Newspaper<br />
   <input type="checkbox" value="Direct Mail" id="CAT_Custom_510976_1" name="CAT_Custom_510976" />
   Direct Mail<br />
   <input type="checkbox" value="Radio" id="CAT_Custom_510976_2" name="CAT_Custom_510976" />
   Radio<br />
   <input type="checkbox" value="Billboard" id="CAT_Custom_510976_3" name="CAT_Custom_510976" />
   Billboard<br />
   <input type="checkbox" value="Online Search" id="CAT_Custom_510976_4" name="CAT_Custom_510976" />
   Online Search<br />
   <input type="checkbox" value="Friend" id="CAT_Custom_510976_5" name="CAT_Custom_510976" />
   Friend<br />
   <input type="checkbox" value="Social Media" id="CAT_Custom_510976_6" name="CAT_Custom_510976" />
   Social Media<br />
   <input type="checkbox" value="Other..." id="CAT_Custom_510976_7" name="CAT_Custom_510976" />
   Other...
</div>
<div style="display: none;" id="other" class="item">
   <label for="CAT_Custom_510977">Other:</label>
   <br />
   <textarea onKeyDown="if(this.value.length&gt;=4000)this.value=this.value.substring(0,3999);" class="cat_listbox" rows="4" cols="10" id="CAT_Custom_510977" name="CAT_Custom_510977"></textarea>
</div>

Javascript:

// Hide or show textarea if the other checkbox field is checked
        var voucher = document.getElementById("CAT_Custom_510976_7");
        function ShowCCFields(val) {                            
            if (!document.getElementById('other'))
                return;         
            if (voucher.checked == true)
                document.getElementById('other').style.display = 'inline';
            else{
                document.getElementById('other').style.display = 'none';
            }
        }   

最佳答案

您从未真正调用过您创建的函数。要使您的函数在单击复选框时运行,您应该将 javascript 更改为:

    var voucher = document.getElementById("CAT_Custom_510976_7");
    voucher.addEventListener('click', ShowCCFields);
    function ShowCCFields(val) {                            
        if (!document.getElementById('other'))
            return;         
        if (voucher.checked == true)
            document.getElementById('other').style.display = 'inline';
        else{
            document.getElementById('other').style.display = 'none';
        }
    }   

addEventListener 行允许在您单击凭证时运行该函数。

关于Javascript隐藏div不想显示在表单上,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20009883/

相关文章:

javascript - 确保内容脚本看到 `click` 事件

javascript - 拼接数组数组中的特定值

javascript - 在 jQuery hideIntent 上设置间隔

javascript - 使用 JS 仅显示请求的表单

forms - 如何正确预填充 flutter 表单字段?

javascript - 两个水平滚动条

javascript - 如何检查 Istanbul 尔单个文件的覆盖范围?

javascript - 动画滑动 div 反弹而不是平滑地出现/消失

html - 物体不会移动

javascript - 动态创建字段/Id 中的 foreach 类似解决方案