使用 JavaScript 复选框事件切换 html 的可见性

Toggle visibility of html using javascript checkbox event

本文关键字：html 可见性 JavaScript 复选框 事件 使用      更新时间：2023-09-26

我将这些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，在项目的这一点上它不是一个选项。

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> 标记的正上方，并在单击时在复选框输入中调用它。您还需要将 id#delAddress 元素从 tbody 更改为 div，以便 getItem 函数将对其进行处理。

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

我修改了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>

该表单现在按预期工作。

相关文章：