使用 javascript 复选框事件切换 html 的可见性答案

【问题标题】：Toggle visibility of html using javascript checkbox event使用 javascript 复选框事件切换 html 的可见性
【发布时间】：2026-01-27 19:15:01
【问题描述】：

我拼凑了这些 javascript 函数来隐藏我的购物车地址表单中的收货地址字段，如果货物要送到帐单地址的话。函数切换由 .. 包裹的 html 的可见性

function getItem(id) {
    var itm = false;
    if(document.getElementById)
        itm = document.getElementById(id);
    else if(document.all)
        itm = document.all[id];
    else if(document.layers)
        itm = document.layers[id];
    return itm;
}
function showHideItem(id) {
    itm = getItem(id);
    if(!itm)
        return false;
    if(itm.style.display == 'none')
        itm.style.display = '';
    else
        itm.style.display = 'none';
    return false;
}

如果正在加载新的地址表单，它工作正常，我遇到的问题是，如果他们提交表单时勾选了复选框，并且验证失败，表单会重新加载并勾选复选框，但不幸的是这些字段是可见的，所以现在删除复选框隐藏字段！

<tr><td class="white"><strong>Delivery Address</strong></td>
    <td>Tick <input Type="checkbox" id="deliver_same" value="yes" onClick="showHideItem('delAddress')" />
  If delivery address is billing address</td></tr>
    <tbody id="delAddress">
    <tr><td>Address line 1</td><td><input class="text" name="saddr1" value="" /></td></tr>
    ...
    <tr><td>Post /Zip Code</td><td><input class="text" name="spostalcode" value="" /></td></tr>
</tbody>

我想我需要的是一个 onload 事件，如果在表单加载时勾选了复选框，它会隐藏字段。刚写完，我可能会去，但没有信心。请不要提及 jquery，在项目的这一点上它不是一个选项。

【问题讨论】：

如果在再次向用户吐出表单之前选中了 style="display"none"，为什么不隐藏服务器上的复选框？
在您的函数中，您应该评估#deliver_same 输入的“已检查”值，而不仅仅是切换点击。如果选中，则隐藏，如果没有，则显示。 *.com/questions/7851868/…
我会使用标签，它们会为您完成所有工作
如果您的意思是将其添加到我想隐藏在 html 中的行中，如果他们取消选中该复选框会发生什么情况。它应该使行重新出现并且行为与表单新鲜时完全相同
Josh - 这将解决一半的问题，即重新加载时复选框反向操作但是如果在表单加载时勾选复选框，通过样式切换隐藏行呢？

标签： javascript css checkbox

【解决方案1】：

function checkDeliverSame() {
    var deliverSame = getItem('deliver_same');
    var deliveryAddress = getItem('delAddress');
    if (deliverSame.checked) {
        deliveryAddress.style.display = 'none';
    } else {
        deliveryAddress.style.display = 'block';
    }
}
checkDeliverSame();  /* This runs the function on page load */

将该函数与您的getItem 函数一起放在</body> 标记的正上方，然后在复选框输入onclick 中调用它。您还需要将 id#delAddress 元素从 tbody 更改为 div，以便 getItem 函数对其起作用。

这是一个小提琴：http://jsfiddle.net/JuNhN/1/

【讨论】：

没用，我也改了deliveryAddress = getItem('delAddress');到 deliveryAddress = document.getElementById('deliveryAddress'); - 两种方式都没有效果
@AndrewB 抱歉，原来的内容有些错误，我已经更新了现在应该工作的内容。检查小提琴。
我将您的回答标记为有帮助，但在我看到您的最新帖子时已经有了一个工作版本。我正在 Lotus Domino 上开发应用程序，这会使事情稍微复杂化。

【解决方案2】：

我修改了 Josh 的函数以使其更通用，也更喜欢 document.getElementById()，因为它更适合 itm.style.display。我不完全信任 checkDeliverSame();在结束标记后不久在 html 中直接调用。

function checkHiddenRows(id) {
    deliverSame = getItem('deliver_same');
    itm = document.getElementById(id);
    if (deliverSame.checked == true) {
        itm.style.display = 'none';
    } // else { alert('Checkbox not checked') } // Verify the checkbox state
}

<script>checkHiddenRows('deliveryAddress');</script>

表单现在按预期工作。

【讨论】：