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

我拼凑了这些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>

送货地址
打上钩
如果递送地址是账单地址
地址行1
...
邮政编码

我想我需要的是一个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

函数一起放在

标记的正上方，并在复选框input onclick中调用它。您还需要将

id#delAddress

元素从

tbody

更改为

div

，以便getItem函数可以处理它

---

这里有一个小问题：

我修改了Josh的函数，使其更通用，更喜欢document.getElementById（），因为它更适合itm.style.display。我并不完全信任CheckDeliverName（）；在结束标记后不久在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>

函数checkHiddenRows（id）{
deliverName=getItem（'deliver_same'）；
itm=document.getElementById（id）；
if（deliverName.checked==true）{
itm.style.display='none'；
}//否则{alert（'Checkbox not checked'）}//验证复选框状态
}
checkHiddenRows（“deliveryAddress”）；

---

表单现在正在按预期工作

如果在再次向用户吐出表单之前选中了该复选框，为什么不使用style=“display”none”隐藏服务器上的复选框？在您的函数中，您应该计算“checked”“交付相同输入的价值，而不仅仅是点击切换。如果选中，则隐藏；如果未选中，则不显示。我会利用标签，他们为你做所有的工作如果你的意思是把它添加到我想隐藏在html中的行中，如果他们取消选中复选框会发生什么。它应该使行重新出现，并与表单刷新时的行为完全相同Josh-这可以解决一半的问题，即重新加载时复选框会反向运行，但是如果表单加载时复选框勾选，则如何通过样式切换隐藏行？不起作用，我在更改deliveryAddress=getItem（'delAddress'）后也尝试了此方法; to deliveryAddress=document.getElementById（'deliveryAddress'）；-也没有效果way@AndrewB很抱歉，原来有一些错误，我已经更新了现在应该工作的内容。查一查。我把你的答案标记为有用，但在我看到你的最新帖子时，已经有了一个有效的版本。我正在LotusDomino上开发应用程序，这使事情稍微复杂一些。