使用javascript復選框事件切換html的可見性

Question

我將這些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，在項目的這一點上它不是一個選擇。

Answer 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/

Answer 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>

該表格現在可以正常使用了。