Question

我有一个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';
            }
        }

Answer 1

你永远不会实际调用你创建的函数。要在单击复选框时运行您的函数，您应该将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允许函数在您点击凭证时运行。

Answer 2

你永远不会实际分配要调用的函数。

voucher.onchange = ShowCCFields;

另外，删除括号中的val，因为您似乎没有使用它。

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

2 个答案: