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

如果商品要转到帐单地址，我已将拼凑在一起的这些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>

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

来源

2013-10-15 AndrewB

为什么不隐藏style =“display”none“的服务器上的复选框，如果在将表单再次分发给用户之前进行检查？ –

在您的函数中，您应该评估#deliver_same输入的”checked“值而不是只是切换点击。如果选中，隐藏，如果没有，做SHOW。http://stackoverflow.com/questions/7851868/whats-the-proper-value-for-a-checked-attribute-of-an- html-checkbox –

我会利用标签，他们为你做所有的工作 –

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/

来源

2013-10-15 20:06:53

没有工作，我也尝试过后更改deliveryAddress = getItem（'delAddress'）; deliveryAddress = document.getElementById（'deliveryAddress'）; - 没有任何效果 – AndrewB

@AndrewB对不起原来有一些错误，我更新了现在应该工作。检查小提琴。 –

我把你的答案标记为有用，但在我看到你的最新帖子时已经有了一个工作版本。我正在Lotus Domino上开发应用程序，这使事情稍微复杂一些。 – AndrewB

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

表格现在按预期工作。

来源

2013-10-16 17:04:18 AndrewB

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

回答

相关问题